Events on html generated by jQuery

Question

I'm generating html tags with jQuery. Like this

jQuery:

$(document).ready(function() {
    $('#example').DataTable();

    var cas = ["1", "2", "3", "4", "5", "6"];
    var text = "";
    var i;

    for (i = 1; i <= cas.length; i++) {
      text += '<li class="noactive" ></li>';
    }       
    jQuery("#bitacorapagination").html(text);

   jQuery('.active').click(function () { 
       suplementos(this);       
       jQuery(".active").removeClass("active").addClass("noactive");
       jQuery(this).removeClass("active").addClass("noactive"); 
       console.log("Event");       
   });
   jQuery('.noactive').click(function () {
       suplementos(this); 
       jQuery(".active").removeClass("active").addClass("noactive");
       jQuery(this).removeClass("noactive").addClass("active");        
       console.log("Event");       
   });

});

html code:

<ul>
  <li id="bitacorapagination"></li>
<ul>

what I need is to remove and add some class to the <ul> element generated by jQuery , but the event doesn't activate on the event onclick()

Do you have any idea how to solve this?

You're using a class selector, but are setting an `id`. Also note that you'll need to use a delegated event handler as you're changing classes at runtime — Rory McCrossan, Oct 14 '16 at 15:31
I put your question on hold as a dupe of the dynamic event binding question since that's the core issue, but Rory is correct, you need to correct your ID/class issue as well — j08691, Oct 14 '16 at 15:34
ohh man that was correct, sorry i didn't see that feel bad about it haha thank you! — bjesua, Oct 14 '16 at 15:41

score 1 · Answer 1 · answered Oct 14 '16 at 15:33

1

you are looping and creating mulitple li's with the same id, switch to a class

'<li class="noactive" ></li>';

answered Oct 14 '16 at 15:33

StackOverMySoul

1,957
1
13
21

you right!, thank you! – bjesua Oct 14 '16 at 15:41

Events on html generated by jQuery

1 Answers1