jQuery 看不到我动态加载的复选框

Question

我编写了一个脚本，它将一系列产品加载到一个 div 标签中。

我现在希望能够使用一系列复选框过滤这些产品。

jquery 向返回 XML 数据集的 ASP 页面创建 $post。数据集的第一个元素包含格式为 ara|dai|sid|alp 等的制造商列表。第二个元素包含上述代码的制造商名称。

然后我使用此脚本将复选框列表构建到 div 标记中。

var mc = new Array();
mc = $("manCodes",xml).text().split(",");
var manTitles = new Array();
manTitles = $("manTitles",xml).text().split(",");

for ( var i=0, len=mc.length; i<len; ++i ){
    m += '<span><input type="checkbox" value="' + mc[i] + '" name="man[]" id="man_'+i+'" />' + manTitles[i] +'</span>'//mc[i];
    }
manufacturers = '<div id="filter" class="man">FILTER<br />' + m + '</div>';
$(".formSelect").append(manufacturers);

这是一种享受，然后在“文档就绪”部分中，我有一个代码段，用于查找对复选框的任何点击：

$(document).ready( function() { 
     $("input:checkbox").click(function() {
    loadXML($("#sortOrder option:selected").val(),$("#limitBy option:selected").val(),$("#productGroup").val());
     });
});

这是我的代码失败的地方，因为对任何复选框的任何点击都不起作用。它几乎就像 JQuery 看不到它创建的这些复选框。

有人可以帮忙解决这个问题吗？

干杯 格雷厄姆

Answer 1

您需要事件委托，否则事件处理程序不会为动态插入/删除的元素触发。 .live 或 .delegate 是两个选项。

$("input:checkbox").live("click", function() {
    // implementation
});

或更好：

$("form").delegate("input:checkbox", "click", function() {
    // implementation
});

Answer 2

使用jQuery.live() 从动态添加的元素中捕获事件。

为所有事件附加一个处理程序 与当前匹配的元素 选择器，现在和将来。

 $("input:checkbox").live("click", function() {
     loadXML($("#sortOrder option:selected").val(),$("#limitBy option:selected").val(),$("#productGroup").val());
 });

Answer 3

试试：

$(document).ready( function() { 
     $("input:checkbox").live("click",function() {
    loadXML($("#sortOrder option:selected").val(),$("#limitBy   option:selected").val(),$("#productGroup").val());
     });
});