Question

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

以下是我的列表项标记：

<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()添加新的列表项后，它会正确显示。当我单击附加的列表项时，事件处理程序不会选择单击。事件处理程序是从加载页面时添加的项目触发的，但它不会在新添加的项目上触发。这是为什么？

Answer 1

替换：

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

与

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

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

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

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

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

单击新添加的列表项时，jQuery单击事件未触发

1 个答案: