click event not working after dynamically adding code

Question

Using a for loop, I am adding rows to a css table when the page loads using $(".live-mu-table").html(newHtML). The cells have click events associated with them. I am not sure why the click events are not working.

Below is a very simplified version that demonstrated the issue along with a jsfiddle.

Why, when after clicking "test" does the exact same code that was there before not work?

html:

<div class="live-mu-table" >
    <div class="live-mu-table-tr">
        <div class="live-mu-table-tdq" id="a-1">q1</div>
        <div class="live-mu-table-tdspacer1"></div>
        <div class="live-mu-table-tda" id="a-3">A3</div>
    </div>
</div>


<div id="test1">test</div>

jquery:

 $("#test1").click(function() { 
   $(".live-mu-table").html("");  
   var newHtML = '<div class="live-mu-table-tr"><div class="live-mu-table-tdq" id="a-1">q1</div><div class="live-mu-table-tdspacer1"></div><div class="live-mu-table-tda" id="a-3">A3</div></div>';
  $(".live-mu-table").html(newHtML);
});

Change your .html to .append... but .html is faster than .append... if you want to do it via .html you need to change your code.. what does .html code do is replace the existing html of new... so it's like nothing has happen. — Sam Teng Wong, Jan 28 '16 at 07:57
Thanks for the response. I tried the append with the same not working result. The code below seems to work. — user1763812, Jan 28 '16 at 09:14

score 1 · Accepted Answer · answered Jan 28 '16 at 08:01

if you really want to achieve it using .html

$("#test1").click(function() { 
  var val = $(".live-mu-table").html();  
  var newHtML = val + '<div class="live-mu-table-tr"><div class="live-mu-table-tdq" id="a-1">q1</div><div class="live-mu-table-tdspacer1"></div><div   class="live-mu-table-tda" id="a-3">A3</div></div>';
  $(".live-mu-table").html(newHtML);
});

click event not working after dynamically adding code

1 Answers1