0

我正在加载一个 php 生成页面的内容，该页面返回一个用户资产列表，每个资产都具有如下 html 结构：

更新以包括所有动态生成的 html。

<div id='list'>
    <div id='asset12345' class='asset'>
        <div class='assetName'>Someform of asset</div>
    </div>
    // repeat .asset block as many times as needed.
</div>

一旦页面显示给用户，我想要做的是在用户输入输入框时过滤项目。

如果我只是在同一个文档中列出一个列表，我就有这个工作，但是一旦我在任何加载的数据上尝试它，它就会失败。

这是我到目前为止的完整代码。我可能已经对它进行了哈希处理。

(function ($) {
    jQuery.expr[':'].Contains = function(a,i,m){
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
    };

    function listFilter(filter, list) {
                    // creates the input element.
        var form = $("<form>").attr({"class":"filterform","action":"#"}),
            input = $("<input>").attr({"class":"filterinput centered","type":"text","value":"Type To Filter"}),
        $(form).append(input).appendTo(filter);

                    // checking for the user typing
        $(input)
            .change( function () {
                var filter = $(this).val();
                if(filter) {
                    $(list).find(".assetName:not(:Contains(" + filter + "))").parent().slideUp('fast');
                    $(list).find(".assetName:Contains(" + filter + ")").parent().slideDown('fast');
                } else {
                    $(list).find(".asset").slideDown();
                }
            return false;
            })
            .keyup( function () {
                $(this).change();
        });
    }
    $(function () {
        listFilter($("#filter"), $("#list"));
    });

            // display a link for the user.
    $(".asset")
        .click( function() {
        var assid = $(this).id();
            if (assid.length > 5) { 
            var wish = "&wish=true";
        }
        $("#link_display").load("getuser.php?ass_id=" + assid + wish);
    });
}(jQuery));

$(document).ready(function(){
            // loading up the initial page
    $("#wrap").load("getuser.php");

            // just removing initial value from the input on focus
    $(".centered").focus(function(){
        if(this.value == 'Type To Filter') {
            this.value = '';
        }
    });
});
4

1 回答 1

1

当页面被加载时，listFilter($("#filter"), $("#list"))被调用。此时，该#list元素尚未在页面中。因此，listFilter 中的代码在输入字段上注册了一个更改侦听器，它将尝试过滤这个不存在的元素：

$(input).change( function () {
    var filter = $(this).val();
    if (filter) {
        $(list).find(...);
    ...

这相当于

$(input).change( function () {
    var filter = $(this).val();
    if (filter) {
        list.find(...);
    ...

相反，每次调用监听器时，它都应该尝试在页面中找到#list 元素：

$(function () {
    // pass the ID of the element, and not the non-existing element itself
    listFilter($("#filter"), "list");
});

...

function listFilter(filter, listId) {
    $(input).change( function () {
        var filter = $(this).val();
        if (filter) {
            $('#' + listId).find(".assetName:not(:Contains(" + filter + "))").parent().slideUp('fast');
    ...
于 2013-08-24T12:15:13.447 回答