javascript - jquery on click 事件不起作用

Question

这是我的点击事件

$('body').on('click', 'ul.notifi', function() {
  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});

这就是我使用 notifi 类创建这些元素的方法

$.each(response['notifResult'], function( index, value ) {
            $('.notifMenu').append('<li><a href="#"><i data-id="' + value['id'] + '" class="' + value['icon'] + ' text-purple notifi"></i> ' + value['notificationText'] + '</a></li>');
          });

这是它们显示的地方

<ul class="dropdown-menu">
              <li class="header">You have <span class="notifNumberRep">...</span> notifications</li>
              <li class="header">Click notifications to mark them as readed.</li>
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu notifMenu">

                </ul>
              </li>
              <li class="footer"><a href="#">View all</a></li>
            </ul>

Answer 1

获取委托(delegate)选择器的 ul - notifi 类位于 i 标记上:

$('body').on('click', '.notifi', function() {
  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});

如果您想在单击 anchor 或 li 时触发事件，请将 class 和 data 属性移动到相应的元素

例如，如果您希望 li 触发上述事件:

$('.notifMenu').append('<li data-id="' + value['id'] + '" class="notifi"><a href="#"><i class="' + value['icon'] + ' text-purple"></i> ' + value['notificationText'] + '</a></li>');

但是，我会将其绑定(bind)到您的 anchor ，因为这样您就可以阻止 anchor 的默认操作(这可能会将您带到另一个页面)。将您的事件绑定(bind)更改为:

$('body').on('click', '.notifi', function(e) {
  e.preventDefault(); // prevent the ddefault action of the anchor so the following will be processed

  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});


// add data and class to anchor
$.each(response['notifResult'], function(index, value) {
  $('.notifMenu').append('<li><a href="#" data-id="' + value['id'] + '" class="notifi"><i class="' + value['icon'] + ' text-purple "></i> ' + value['notificationText'] + '</a></li>');
});