.load後jQuery的過濾html元素（）

Question

我加載了一個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 = ''; 
     } 
    }); 
}); 

Answer 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'); 
    ...