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

我的单击事件处理程序没有对新附加的列表项触发

以下是我的列表项标记：

<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>

我正在玩这些列表项。当我点击一个列表项时，我会在

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");
          });
     }
});

$（'.product colors li'）。单击（函数（）{
if（this.id）{
$.ajax({
数据：{sku:this.id}，
数据类型：“json”，
url:“/MyWebsite/Product/Test”
}).完成（功能（数据）{
var productcolors=$（'ul.productcolors'）；
$。每个（数据、产品、功能（i、产品颜色）{
if（ProductColor.IsAvailable）{
if（ProductColor.IsSelected）{
productcolors.append（“
”+productcolor.Name+”
）；
}
否则{
productcolors.append（“
”+productcolor.Name+”
）；
}
}
否则{
productcolors.append（'
'+productcolor.Name+'
'）；
}
});
}).fail（函数（）{
警报（“错误”）；
});
}
});

通过执行

productcolors.append（）

添加新列表项后，它将正确显示。当我点击附加的列表项时，事件处理程序不会拾取该点击。事件处理程序是从加载页面时添加的项目中激发的，但不会对新添加的项目激发。为什么会这样？

替换：

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

与

这称为事件委派：

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序。这 元素可以是视图中的容器元素 例如，模型视图控制器设计，或记录事件 处理程序希望监视文档中的所有冒泡事件。这个 文档元素在之前的文档头中可用 加载任何其他HTML，因此可以安全地在那里附加事件，而无需 正在等待文档准备就绪

原始代码使用直接事件处理程序的地方

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

使用

$（'ul.product colors'）。在（'click'，'li'，function（）{

事件委派

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

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