CODEWITHSUNDEEP
javascriptjquery
Kavya
Kavya

Reputation: 13

Call javascript function through dynamically generated href tag (the js function has one paramter)

I need to call getStandards() function from the dynamically generated href tag.All the code is in .js file. I went through many stackoverflow questions but I couldn't find the solution. The function has one parameter(classId) as shown below:

var ul = $('<ul></ul>');
var li = $('<li></li>');

for (var i = 0; i < classes.length; i++) {
    var classId = classes[i].classId;
    var html = "";
    html = "<li><a href='#' id='" + classId + "' onClick='getStandards(" + 
    classId + ")' >" + classes[i].className + "</a></li><br/>";
    li.append(html);
}
ul.append(li);

function getStandards(classId) {
    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Can someone help me !! thank you.

Upvotes: 0

Views: 601

Answers (2)

Taplar
Taplar

Reputation: 24965

Rather than making multiple inline bindings, I would suggest using a data attribute and a delegate event binding for this logic.

var ul = $('<ul></ul>');

ul.append(
  classes.map( aClass => {
    return `
      <li>
        <a href="#" class="class-entry"
           data-class-id="${aClass.classId}">
          ${aClass.className}
        </a>
      </li>
    `;
  } )
);

ul.on( 'click', '.class-entry', event => {
  let $link = $( event.target );

  getStandards( $link.data( 'classId' ) );
} );

function getStandards(classId) {

}
  • You can use a template literal to make your html construction more readable
  • Mapping all the classes to html and appending them all and once, reduces the number of appends to the ul you are doing
  • Attaching a delegate event listener to the ul lets you handle the click for all the children of it, and you can grab the class id from the data attribute

Upvotes: 1

Dr_Derp
Dr_Derp

Reputation: 870

I would hazard a guess that you aren't appending your ul to the body and that the classId is a string. With a few modifications this code can work:

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"> . 
</script>
</head>
<body>
    <script>
        // This code is copyright by nobody and may be used freely without attribution
        var ul = $('<ul></ul>');
        var li = $('<li></li>');

        const classes = [
            { classId: 'id1', className: 'name1'}
        ];

        for (var i = 0; i < classes.length; i++) {
            var classId = classes[i].classId;
            var html = "";
            html = "<li><a href='#' id='" + classId + "' onClick='getStandards(\"" + 
    classId + "\")' >" + classes[i].className + "</a></li><br/>";
            li.append(html);
        }
        ul.append(li);

        $('body').append(ul);

        function getStandards(classId) {
            alert('get standards! ' + classId);
        }
    </script>
</body>

Note the appending to the body as well as the extra quotes by the onclick. If you don't have those quotes, it will look like this: onclick="getStandards(id1)" which is invalid since id1 is a string

Upvotes: 1

Related Questions