动态表行，将click事件委托给新添加的元素

Question

First of all just want to mention that I have been through almost every similar Q&A, and non of solutions and suggestions helped me in my case.

I have this construction DEMO and bellow the code that adds a new element to the table. I like the new element, which is a tr and td, have the same functionality as those already existing. I tried live() and delegate(), nothing works. All the suggestions and tutorials pointing towards on() function which I am already using, but still does not work. What am I doing wrong? Please, any suggestions would be highly appreciated. Code below adds new element:

$(function(){
    $('#add').on('click',function() {
        $('#edit-tb tr:last').after('<tr><td><button class="up">Up</button></td><td><span class="times" data-myval="1"></span>Goe</td><td><button class="down">Down</button></td></tr>');
    });
});

Answer 1

Your event delegation is not correct. Try like following.

$(document).on('click', '.up', function () {
    var count = $(this).closest('tr').find('.times').attr('data-myval');
    count++;
    if (count > 4) {
        count--;
        $('#max').modal('show');
        $(this).closest('tr').find('.times').text(4 + ' x ');
    }
    $(this).closest('tr').find('.times').attr('data-myval', count);
    $(this).closest('tr').find('.times').text(count + ' x ');
});

$(document).on('click', '.down', function () {
    var count = $(this).closest('tr').find('.times').attr('data-myval');
    count--;
    parseInt($(this).closest('tr').find('.times').attr('data-myval', count))
    $(this).closest('tr').find('.times').text(count + ' x ');
    if (count < 2) {
        $(this).closest('tr').find('.times').text('');
    }
    if (count < 1) {
        $(this).parents('tr').remove();
    }
});

UPDATED FIDDLE

Answer 2

Event delegation captures the event on a container, but only invokes the callback if the target element or one of his parents has a certain selector. To delegate an event, you attach the event to the parent using .on() , but add a 2nd parameter, which states the target. For example:

  $('.table') // container
      /* event , target, handler */
    .on('click', '.up' , function() {});

You should attach the event handler to a close container, the .table or event .table > tbody if you want the binding to ignore the header.

Demo ( fiddle ):

$(function() {
  $('.table')
    .on('click', '.up', function() {
        var element = $(this);
      var count = element.closest('tr').find('.times').attr('data-myval');
      count++;
      if (count > 4) {
        count--;
        $('#max').modal('show');
        element.closest('tr').find('.times').text(4 + ' x ');
      }
      element.closest('tr').find('.times').attr('data-myval', count);
      element.closest('tr').find('.times').text(count + ' x ');

    })
    .on('click', '.down', function() {
        var element = $(this);
      var count = element.closest('tr').find('.times').attr('data-myval');
      count--;
      parseInt(element.closest('tr').find('.times').attr('data-myval', count))
      element.closest('tr').find('.times').text(count + ' x ');
      if (count < 2) {
        element.closest('tr').find('.times').text('');
      }
      if (count < 1) {
        element.parents('tr').remove();
      }
    });
});