Javascript Jquery.change（）事件只触发一次

因此，我对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');
}

我应该注意两件事：首先，搜索栏工作得很好，两个搜索栏中的匿名函数几乎完全相同，正如我所说的，如果在初始加载后尝试过滤，过滤效果会很好。第二个问题是，将.change（匿名函数）替换为.on（“change”，匿名函数）时也会出现同样的问题

---

任何帮助或建议都将不胜感激。谢谢。

尝试在DOM中的事件侦听器中使用一些引用，如“body”：

  $('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...  
    })

---

你可以不止一次地发射它。我同意费尔南多·厄本的回答，但它并不能解释到底发生了什么

您已经创建了一个附加到HTML元素（

id=“classFilter”

）的处理程序，该元素会导致部分HTML被重写。我怀疑处理程序会覆盖包含处理程序的元素的HTML。因此，在此之后，用户单击一个新的HTML元素，它看起来像旧的元素，但没有处理程序

---

有两种方法可以解决这个问题。您可以在处理程序中添加代码，将处理程序添加到刚刚创建的新元素中。在本例中，这意味着使处理程序成为一个引用自身的命名函数。或者（更简单的方法）你可以像费尔南多那样做。如果执行此操作，则事件处理程序将附加到

主体

，但它仅对单击

主体

内的

#classFilter

元素作出响应。换句话说，当用户单击body上的任意位置时，jQuery检查单击是否发生在

body\classFilter

元素上。这样，在设置处理程序时，

#classFilter

是否存在并不重要。请参阅中的“直接和委派事件”。

发布您的HTML和CSS，或者创建一个JSFIDLE以便我们可以查看？下面是讨论中的HTML模板。如果需要的话，我可以发布所有的CSS，但我不知道它会受到什么影响。谢谢应该解释原因，或者指向一个有详细答案的副本我正在制定一个答案，在我们说话时解释；-）非常感谢您的解决方案！正在阅读大卫的解释。我一整天都在为此绞尽脑汁。我还有一件事要说。您正在使用

$（'body'）

。我似乎记得在某个地方读到过这样一篇文章：如果在HTML树的根附近的元素上附加了很多这样的东西，那么它可能会影响性能。最好将处理程序附加到尽可能远离根的地方，即最里面的持久元素（我所说的“持久”当然是指不会被删除的元素）。不知道这有多重要啊，我明白了。非常感谢您的详细解释！这完全有道理。再次感谢。啊，现在我知道了，我有很多代码可以优化。再次感谢你们两位！很好的解释！我不能比你做得那么好@Polyrogue请查看此答案以了解我的最后一个答案。问候语！