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

时间:2022-11-07 12:20:26

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:

我有这个构造DEMO和下面的代码,向表中添加一个新元素。我喜欢新元素,​​它是tr和td,具有与现有元素相同的功能。我试过live()和delegate(),没什么用。所有建议和教程指向我已经使用的on()函数,但仍然无法正常工作。我究竟做错了什么?请高度赞赏任何建议。下面的代码添加了新元素:

$(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>');
    });
});

2 个解决方案

#1


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:

事件委托在容器上捕获事件,但仅在目标元素或其父节点之一具有某个选择器时才调用回调。要委派事件,请使用.on()将事件附加到父事件,但添加第2个参数,该参数表示目标。例如:

  $('.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.

如果希望绑定忽略标头,则应将事件处理程序附加到关闭容器,.table或事件.table> tbody。

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();
      }
    });
});

#2


4  

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

#1


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:

事件委托在容器上捕获事件,但仅在目标元素或其父节点之一具有某个选择器时才调用回调。要委派事件,请使用.on()将事件附加到父事件,但添加第2个参数,该参数表示目标。例如:

  $('.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.

如果希望绑定忽略标头,则应将事件处理程序附加到关闭容器,.table或事件.table> tbody。

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();
      }
    });
});

#2


4  

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