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... 
    }) 

这将工作，你可以启动它不止一次。