0

1.I run this codes.

<table id="widgetTable" class="table table-hover">
<thead>
    <tr>
    <th>NO.</th>
</tr></thead> </table>

//skip details

$("#widgetTable > tbody:last").append('<tr><td>'+ (i+1) +'</td></tr>);
//upper code line is succeesed in run time
  1. But be appended td isnt find in table when using debugging tools of browser (be unchanged source)
  2. so bottom codes wasnt activited? how can i do! tell me a way.. :(

$( document ).ready(function() {
 $('#widetTable').find('tr').click( function(){

   var selected = $(this).hasClass("highlight");
      $("#widetTable tr").removeClass("highlight");
      if(!selected)
              $(this).addClass("highlight");
   
    alert('You clicked row '+ ($(this).index()+1) );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
M.K Che
  • 25
  • 6
  • You have a syntax error on the line `$("#widgetTable > tbody:last").append(''+ (i+1) +');` in your first code block - missing closing `'` before the last `)`. What debugging tools are you using? If you just use the "View Page Source" option it is supposed to show you the *original* source from before it was modified by JS. – nnnnnn Sep 26 '16 at 06:47
  • Read about [__`Event delegation`__](https://learn.jquery.com/events/event-delegation/) – Rayon Sep 26 '16 at 06:51
  • @nnnnnn oh I'm sorry that my mistake. the original source diffrent it(no matter source) . I used dev-tool of chrome. how I can see that is changed source??? – M.K Che Sep 26 '16 at 07:48
  • In Chrome, press F12 to open the dev tools, and then look at the "Elements" tab. That shows the current DOM. – nnnnnn Sep 26 '16 at 07:56
  • ?? ah until i dont know between elements and sources tab. anyway. thanks!! – M.K Che Sep 26 '16 at 08:05

2 Answers2

0

For dynamically generated elements, you want to use .on() method. So this:

$('#widetTable').find('tr').click( function(){

Would become:

$('#widetTable').on( 'click', 'tr', function() {

More details here

I would prefer .on over .click because the former can use less memory and work for dynamically added elements.

Community
  • 1
  • 1
nikjohn
  • 20,026
  • 14
  • 50
  • 86
  • `.on('click', function() {` does exactly the same thing as `.click(function() {`. – nnnnnn Sep 26 '16 at 06:51
  • Nope. How about you read the jQuery doco for `.on()`. The behaviour of the `.on()` method changes depending on what arguments you call it with: for it to work with dynamically added elements you have to supply a selector as the second argument to `.on()`. It's not a direct replacement for `.live()`. – nnnnnn Sep 26 '16 at 06:52
  • You're right about the second argument that I missed. I've updated that above. – nikjohn Sep 26 '16 at 07:00
0

It seems you want to attach a click event on tr elements of the table where the tr are dynamically added. If so.., then try this

$( document ).ready(function() {
    $('#widetTable').on("click", "tr", function(event){

         var selected = $(this).hasClass("highlight");
            $("#widetTable tr").removeClass("highlight");
            if(!selected)
                    $(this).addClass("highlight");

          alert('You clicked row '+ ($(this).index()+1) );
        });
});
atul
  • 552
  • 4
  • 16