jQuery on()方法绑定td子元素事件失效问题咨询

问题背景 #

开发日历系统时，已实现通过jQuery+PHP添加新预约的功能，但嵌套在.inhoud类td元素内的adjust（调整）、trash（删除）图片按钮点击无响应，只有禁用td的点击事件才能正常触发按钮事件，且HTML为动态生成。

问题原因 #

1. 事件冒泡：点击按钮时，事件会向上冒泡到父元素.inhoud，触发td的点击逻辑，覆盖了按钮的点击事件。
2. 动态元素绑定失效：直接使用$('.adjust').on('click')的方式，无法为后续动态生成的元素绑定事件。

解决方案 #

1. 阻止事件冒泡 #

在按钮的点击事件中调用event.stopPropagation()，避免事件传递到父元素td。

2. 使用事件委托 #

将事件绑定到静态的父容器（比如document），通过委托的方式处理动态生成元素的点击事件。

修改后的代码 #

JavaScript #

$(document).ready(function() {
  // 用事件委托绑定adjust按钮事件
  $(document).on('click', '.adjust', function(event) {
    event.stopPropagation(); // 阻止事件冒泡
    $('#popupsubmit').val("Aanpassen");
    $('#afspraakinfo').text('Afspraak aanpassen:');
    $('#popup').show(800);
  });

  // 用事件委托绑定trash按钮事件
  $(document).on('click', '.trash', function(event) {
    event.stopPropagation(); // 阻止事件冒泡
    $('#popupsubmit').val("Verwijderen");
    $('#afspraakinfo').text('Afspraak verwijderen:');
    $('#popup').show(800);
  });

  $('.inhoud').click(function() {
    var trimTime = $.trim($(this).parent().text());
    var aanVang = moment(trimTime, "HH:mm").format('HH:mm');
    $('input[name="vanaf"]').val(aanVang);
    var startTime = trimTime;
    var newTime = moment(startTime, "HH:mm").add(50, 'minutes').format('HH:mm');
    $('input[name="tot"]').val(newTime);
    $('#popupsubmit').val("Toevoegen");
    $('#afspraakinfo').text('Nieuwe afspraak:');
    $('#popup').show(800);
  });
});

说明 #

• 事件委托：通过$(document).on('click', '.adjust', ...)，可以捕获动态生成的.adjust元素的点击事件，因为事件会冒泡到静态的document上。
• 阻止冒泡：event.stopPropagation()确保点击按钮时，不会触发父元素.inhoud的点击逻辑，按钮的事件能正常执行。

内容的提问来源于stack exchange，提问作者Medina