Событие Jquery .change() только один раз

Question

Итак, я довольно новичок с jquery и js, поэтому я извиняюсь, если это глупая ошибка, но после исследования я не могу понять это.

Итак, у меня есть список данных, загружаемых изначально в шаблон, одна часть которого представляет собой раскрывающийся список, который позволяет фильтровать данные. Моя проблема в том, что фильтрация работает только один раз? Как и в, функция .change внутри $ (document) .ready() запускает только один раз.

Существует два способа перезагрузить данные: либо щелкните логотип, либо перезагрузите его, либо используйте панель поиска. Выполнение любого из них в любое время также означает, что функция .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», анонимная функция)

Любая помощь или совет будут очень благодарны. Благодарю.

Answer 1

Я согласен с ответом Фернандо Урбана, но на самом деле это не объясняет, что происходит.

Вы создали обработчик, прикрепленный к элементу HTML (id="classFilter"), который заставляет часть HTML переписываться. Я подозреваю, что обработчик перезаписывает HTML, который содержит элемент с обработчиком на нем. Поэтому после этого пользователь нажимает на новый элемент HTML, который выглядит как старый, но не имеет обработчика.

Существует два пути. Вы можете добавить код внутри обработчика, который добавляет обработчик к только что созданному элементу. В этом случае это означало бы сделать обработчик именованной функцией, которая ссылается на себя. Или (более простой способ) вы могли бы сделать то, что сделал Фернандо. Если вы это сделаете, обработчик события подключен к body, но он реагирует только на клики на элементе #classFilter внутри body. Другими словами, когда пользователь щелкает в любом месте тела, 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... 
    }) 

Это будет работать, что вы можете запустить его несколько раз.