Jquery .change（）イベントは一度だけ発生します

Question

jqueryとjsはかなり初心者ですので、愚かなエラーですが、調査した後には分かりません。

私は最初にテンプレートに読み込まれたデータのリストを持っています。その一部はデータをフィルタリングできるドロップダウンボックスです。私の問題は、フィルタリングは一度しか動作しないということですか？のように、$（document）.ready（）の中の.change関数は一度だけ起動します。

データを再読み込みするには、ロゴをクリックしてすべてを再読み込みするか、検索バーを使用する2つの方法があります。これらのいずれかをいつでも実行すると、.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'); 
} 

私は2つのことに注意する必要があります。まず、検索バーが完全に動作し、それらの両方の内側に無名関数はほぼ同一であり、私が言ったように、あなたが最初の後にそれをしようとした場合、フィルタリングが完璧に動作することを負荷。 2番目の問題は、.change（匿名関数）を.on（ "匿名関数"）と置き換えて同じ問題が発生することです。

ご迷惑をおかけして申し訳ありません。ありがとう。これは何度もそれがより発射できることに動作します

$('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 1

私はフェルナンドアーバンの答えに同意しますが、実際に何が起こっているかは説明していません。

HTML要素の一部（id="classFilter"）に添付されたハンドラを作成すると、HTMLの一部が書き換えられます。ハンドラがある要素を含むHTMLをハンドラが上書きすることが考えられます。この後、ユーザーは新しいHTML要素をクリックしています。新しいHTML要素は古いものと同じように見えますが、ハンドラはありません。

これには2つの方法があります。ハンドラ内にコードを追加して、作成したばかりの新しい要素にハンドラを追加することができます。この場合、それは、ハンドラを自身を参照する名前付き関数にすることを意味します。フェルナンドがやったことを（もっと簡単に）することもできます。これを行うと、イベントハンドラはbodyにアタッチされますが、body内の#classFilter要素のクリックに対してのみ応答します。言い換えると、ユーザーが本文の任意の場所をクリックすると、jQueryはクリックがbody #classFilter要素で発生したかどうかを確認します。このようにして、ハンドラの設定時に#classFilterが存在するかどうかは関係ありません。 jQuery docs for .on methodの「直接イベントと委任イベント」を参照してください。

Answer 2

は次のようにあなたのDOM内のイベントリスナーに「身体」のようないくつかの参照を使用してみてください。