如何使用jQuery修改动态创建的无序列表

我正在尝试使用jQuery筛选无序列表。问题是，列表本身（#jqueryFileTree）是动态加载的，因此我在操作它时遇到了问题。代码如下（从http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/):

（函数（$）{
//不区分大小写的contains（）的自定义css表达式
jQuery.expr['：'].Contains=函数（a，i，m）{
返回（a.textContent | | a.innerText | |“”）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};
函数listFilter（header，list）{//header是任意元素，list是无序列表
//创建筛选表单并将其添加到标题中
变量形式=$（“”）。属性({
“类”：“过滤性能”，
“行动”：“#”
}),
输入=$（“”）。属性({
“类”：“filterinput”，
“类型”：“文本”
});
$（表单）.append（输入）.appendTo（标题）；
$（输入）
.改变（功能）{
var filter=$（this.val（）；
如果（过滤器）{
警报（$（list.html（））；
//这将查找包含输入的列表中的所有链接，
//并隐藏不包含输入的内容，同时显示包含输入的内容
$（列表）.find（“a:not（：Contains（“+filter+”）））.parent（）.slideUp（）；
$（列表）.find（“a:包含（“+filter+”））.parent（）.slideDown（）；
}否则{
$（list.find（“li”）.slideDown（）；
}
返回false；
})
.keyup（函数（）{
//在每个字母后触发上述更改事件
$（this.change（）；
});
}
//昂多姆雷迪
$（函数（）{
listFilter（$（“#可排序的#列表头”），$（#jqueryFileTree”）；
});
}（jQuery））；

据我所知，我需要使用.on（）方法来侦听ul#jqueryFileTree父级上的事件。问题是，我不想听名单上的任何事件。我所需要做的就是在搜索框中侦听一个事件，这会触发列表中的find方法对其进行过滤。但由于创建文档时列表不存在，因此“查找”不起作用

那么，如何使用.find而不直接在动态创建的元素上使用侦听器呢

---

提前谢谢

只需传递选择器，而不是jquery对象（在调用它时它是空的）

因为您不缓存它，但总是缓存它。

$（list）

您将不会有问题

尽管您仍然可以将其缓存在

change

函数中

.change(function () {
    var filter = this.value,
        $list = $(list);

    if (filter) {
        alert($list.html());
        // this finds all links in a list that contain the input,
        // and hide the ones not containing the input while showing the ones that do
        $list.find("a:not(:Contains(" + filter + "))").parent().slideUp();
        $list.find("a:Contains(" + filter + ")").parent().slideDown();
    } else {
        $list.find("li").slideDown();
    }
    return false;
})

---

只需传递选择器而不是jquery对象（在调用它时它是空的）

因为您不缓存它，但总是缓存它。

$（list）

您将不会有问题

尽管您仍然可以将其缓存在

change

函数中

.change(function () {
    var filter = this.value,
        $list = $(list);

    if (filter) {
        alert($list.html());
        // this finds all links in a list that contain the input,
        // and hide the ones not containing the input while showing the ones that do
        $list.find("a:not(:Contains(" + filter + "))").parent().slideUp();
        $list.find("a:Contains(" + filter + ")").parent().slideDown();
    } else {
        $list.find("li").slideDown();
    }
    return false;
})

---

动态插入列表后，还可以更快地调用

listFilter（）

函数<代码>函数insertList（…）{/*插入列表*/listFilter（$（“#可排序列表_head”），$（“#myList”）；}动态插入列表后，还可以更快地调用

listFilter（）

函数<代码>函数insertList（…）{/*插入列表*/listFilter（$（“#可排序列表_head”），$（“#myList”）；}这非常简单。非常感谢，现在效果很好！这非常简单。非常感谢，现在效果很好！

.change(function () {
    var filter = this.value,
        $list = $(list);

    if (filter) {
        alert($list.html());
        // this finds all links in a list that contain the input,
        // and hide the ones not containing the input while showing the ones that do
        $list.find("a:not(:Contains(" + filter + "))").parent().slideUp();
        $list.find("a:Contains(" + filter + ")").parent().slideDown();
    } else {
        $list.find("li").slideDown();
    }
    return false;
})