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（＆＃34;更改＆＃34;，匿名函数）替换.change（匿名函数）时出现同样的问题

非常感谢任何帮助或建议。感谢。

Answer 1

尝试使用像＆＃39; body＆＃39;在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...  
    })

这样可以解决多次问题。

Answer 2

我同意Fernando Urban的回答，但它并没有真正解释发生了什么。

您已创建附加到HTML元素（id="classFilter"）的处理程序，该处理程序会导致部分HTML被重写。我怀疑处理程序会覆盖包含带有处理程序的元素的HTML。所以在此之后，用户点击一个新的HTML元素，它看起来像旧元素，但没有处理程序。

这有两种方法。您可以在处理程序中添加代码，将处理程序添加到刚刚创建的新元素中。在这种情况下，这意味着使处理程序成为引用自身的命名函数。或者（更简单的方法）你可以做到费尔南多做的事情。如果您这样做，事件处理程序将附加到body，但它仅响应#classFilter内body元素的点击。换句话说，当用户单击正文上的任何位置时，jQuery会检查单击是否发生在body #classFilter元素上。这样，处理程序设置时是否存在#classFilter并不重要。请参阅＆＃34;直接和委派活动＆＃34;在jQuery docs for .on method。

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

2 个答案: