jQuery的點擊事件不起作用

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

您缺少<ul />的類名'notifi'來使jQuery模式起作用。 有關您的代碼的有效示例，請參見此小提琴。

https://jsfiddle.net/fng33ogr/1/

<ul class="dropdown-menu">

應該：

<ul class="dropdown-menu notifi">

更新資料

查詢改為ul.notifi a ，移動id數據屬性來a 。 看到最新的小提琴。

Answer 2

以您的委托選擇器ul - notifi類在i標記上：

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

如果您想通過單擊錨點或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>');

但是，我將其綁定到您的錨點上，因為這樣您就可以阻止錨點的默認操作（這可能會使您轉到另一個頁面）。 將事件綁定更改為：

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

Answer 3

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

更具體地說，將父選擇器添加為ul，將子選擇器類添加為“ .notify”