单击新附加的列表项时，jQuery单击事件未触发[重复]答案

【问题标题】：jQuery click event not firing when clicking on newly appended list items [duplicate]单击新附加的列表项时，jQuery单击事件未触发[重复]
【发布时间】：2015-07-21 12:49:44
【问题描述】：

我的点击事件处理程序没有在新添加的列表项上触发。

这是我的列表项标记：

<ul class="list-inline product-colours">
     <li id="my-sku-1" class="available">product colour 1</li>
     <li id="my-sku-2" class="available selected">product colour 2</li>
     <li id="my-sku-3" class="available">product colour 3</li>
     <li class="not-available">product colour 4</li>
</ul>

我对上述列表项的样式：

.product-colours li
{
     cursor: pointer;
     padding: 5px;
}

.product-colours .available
{
     border: 2px solid #999;
}

.product-colours .selected
{
     border: 2px solid #333;
}

.product-colours .not-available
{
     border: 2px solid #f00;
     cursor: not-allowed;
}

我正在玩这些列表项。当我点击一个列表项时，我会在C# 中执行一些服务器代码并返回JSON 结果。我将这个结果添加到上面已经创建的列表项中。

这是我的点击事件处理程序的jQuery 代码：

$('.product-colours li').click(function () {
     if (this.id) {
          $.ajax({
               data: { sku: this.id },
               dataType: 'json',
               url: '/MyWebsite/Product/Test'
          }).done(function (data) {
               var productColours = $('ul.product-colours');
               $.each(data.Products, function (i, productColour) {
                    if (productColour.IsAvailable) {
                         if (productColour.IsSelected) {
                              productColours.append('<li id="' + productColour.SKU + '" class="available selected">' + productColour.Name + '</li> ');
                         }
                         else {
                              productColours.append('<li id="' + productColour.SKU + '" class="available">' + productColour.Name + '</li> ');
                         }
                    }
                    else {
                         productColours.append('<li class="not-available">' + productColour.Name + '</li> ');
                    }
               });
          }).fail(function () {
               alert("error");
          });
     }
});

通过productColours.append() 添加新列表项后，它会正确显示。当我去单击附加的列表项时，事件处理程序不会拾取单击。页面加载时添加的项目会触发事件处理程序，但不会在新添加的项目上触发。这是为什么呢？

【问题讨论】：

使用$('ul.product-colours').on('click', 'li', function() {事件委托learn.jquery.com/events/event-delegation

标签： javascript c# jquery html css

【解决方案1】：

替换：

$('.product-colours li').click(function () {

与

$('.product-colours').on("click", "li",function() {

这称为事件委托：http://api.jquery.com/on/

委托事件的优势在于它们可以处理来自以后添加到文档中的后代元素。经过选择一个保证在该时间存在的元素附加了委托事件处理程序，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。这 element 可以是视图中的容器元素例如，模型-视图-控制器设计，或记录事件处理程序想要监视文档中的所有冒泡事件。这文档元素在文档头部之前可用加载任何其他 HTML，因此在此处附加事件是安全的等待文档准备好。

您的原始代码使用直接事件处理程序。

事件处理程序仅绑定到当前选定的元素；他们在您的代码调用 .on() 时必须存在。确保元素存在并且可以选择，将脚本放置在 HTML 标记中的元素或在文档中执行事件绑定准备好处理程序。或者，使用委托事件附加事件处理程序。

【讨论】：