jquery.change（）事件只會觸發一次

Question

所以我相當新手jQuery和js，所以我很抱歉如果這是一個愚蠢的錯誤，但經過研究我無法弄清楚。

所以我有一個數據列表最初在一個模板中加載，其中的一部分是一個下拉框，可以讓您過濾數據。我的問題是，過濾只能工作一次？如在$（document）.ready（）中的.change函數只會觸發一次。

有兩種方法可以重新加載數據，或者單擊徽標並重新加載它，或者使用搜索欄。任何時候執行這些操作都意味着.change函數不會再次啓動。直到刷新頁面。

var list_template, article_template, modal_template; 
var current_article = list.heroes[0]; 


function showTemplate(template, data) 
{ 
    var html = template(data); 
    $("#content").html(html); 
} 

$(document).ready(function() 
{ 
    var source = $("#list-template").html(); 
    list_template = Handlebars.compile(source); 

    source = $("#article-template").html(); 
    article_template = Handlebars.compile(source); 

    source = $("#modal-template").html(); 
    modal_template = Handlebars.compile(source); 

    showTemplate(list_template,list); 
    $(".articleButton").click(function() 
    { 
     var index = $(this).data("id"); 
     current_article = list.heroes[index]; 
     showTemplate(article_template,current_article); 
     $('.poseThumb').click(displayModal); 
    }); 

    $("#classFilter").change(function() 
    { 
     console.log("WOW!"); 
     var classToFilter = this.value; 
     var filteredData = 
     { 
      heroes: list.heroes.filter(function(d) 
      { 
       if (d.heroClass.search(classToFilter) > -1) 
       { 
        return true; 
       } 
       return false; 
      }) 
     }; 
     console.log(filteredData); 
     showTemplate(list_template,filteredData); 
     $(".articleButton").click(function() 
     { 
      var index = $(this).data("id"); 
      current_article = filteredData.heroes[index]; 
      showTemplate(article_template,current_article); 
      $('.poseThumb').click(displayModal); 
     }); 
    }); 

    $("#searchbox").keypress(function (e) 
    { 
     if(e.which == 13) 
      { 
       var rawSearchText = $('#searchbox').val(); 
       var search_text = rawSearchText.toLowerCase(); 
       var filteredData = 
       { 
        heroes: list.heroes.filter(function(d) 
        { 
         if (d.name.search(search_text) > -1) 
         { 
          return true; 
         } 
         return false; 
        }) 
       }; 
       console.log(filteredData); 
       showTemplate(list_template,filteredData); 
       $(".articleButton").click(function() 
       { 
        var index = $(this).data("id"); 
        current_article = filteredData.heroes[index]; 
        showTemplate(article_template,current_article); 
        $('.poseThumb').click(displayModal); 
       }); 
      } 
    }); 

    $("#logo").click(function() 
    { 
      showTemplate(list_template,list); 

      $(".articleButton").click(function() 
      { 
     var index = $(this).data("id"); 
       current_article = list.heroes[index]; 
       showTemplate(article_template,current_article); 
       $('.poseThumb').click(displayModal); 
      }); 
    }); 
    //$("#logo").click(); 
}); 

function displayModal(event) 
{ 
     var imageNumber = $(this).data("id"); 
     console.log(imageNumber); 
     var html = modal_template(current_article.article[0].vicPose[imageNumber]); 
     $('#modal-container').html(html); 
     $("#imageModal").modal('show'); 
} 

我應該注意兩點：第一，在搜索欄中完美的作品了，裏面兩個人的匿名函數幾乎是相同的，就像我說的，過濾完美的作品，如果你最初的後嘗試加載。第二個問題是使用.on（「change」，匿名函數）替換.change（匿名函數）時出現的相同問題。

任何幫助或建議將不勝感激。謝謝。

Answer 1

我同意Fernando Urban的回答，但實際上並未解釋發生了什麼事。

您已創建一個附加到HTML元素（id="classFilter"）的處理程序，該處理程序會導致部分HTML被重寫。我懷疑處理程序會覆蓋包含處理程序的元素的HTML。所以在這之後，用戶點擊一個新的HTML元素，看起來像舊的，但沒有處理程序。

有兩種方法可以解決這個問題。您可以在處理程序中添加代碼，將處理程序添加到剛剛創建的新元素中。在這種情況下，這意味着使處理程序成爲指向自身的命名函數。或者（更簡單的方法），你可以做費爾南多做的事情。如果您這樣做，事件處理程序將附加到body，但它只響應點擊body內的#classFilter元素。換句話說，當用戶點擊正文的任何​​位置時，jQuery會檢查點擊是否發生在body #classFilter元素上。這樣，設置處理程序時是否存在#classFilter並不重要。請參閱jQuery docs for .on method中的「直接和委託事件」。

Answer 2

嘗試在事件偵聽器來使用諸如「身體有一定的參考你的DOM中，如：

$('body').on('click','.articleButton', function() { 
     //Do your stuff... 
    }) 


    $('body').on('click','#classFilter', function() { 
     //Do your stuff... 
    }) 


    $('body').on('keypress','#searchbox', function() { 
     //Do your stuff... 
    }) 

    $('body').on('click','#logo', function() { 
     //Do your stuff... 
    }) 

這將工作，你可以啓動它不止一次。