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

Question

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.

what's classes ?? Edit the snippet above to explain the issue — Mohamed-Yousef
– Mohamed-Yousef, Commented Aug 15, 2019 at 21:23

Dr_Derp · Accepted Answer · 2019-08-15 21:22:54Z

1

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

answered Aug 15, 2019 at 21:22

Dr_Derp

8707 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kavya Over a year ago

thanks for the response but the issue is not with append, i am unable to call the js function here. Not able to pass the parameters as well.

Dr_Derp Over a year ago

Based on the code you provided, either of the two solutions given should work. Please update your question to provide more code so we can better see what the issue is.

Taplar · Accepted Answer · 2019-08-15 22:32:16Z

1

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

answered Aug 15, 2019 at 22:32

Taplar

25k4 gold badges24 silver badges36 bronze badges

1 Comment

Kavya Over a year ago

Thank you for the response. Is there any other way of calling a function through dynamic jquery tag? I need to create a nested dynamic tree further on, so I need li tags as well, I can't directly append to the ul tag. I am just seeing how can I do it.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related