Отлов появившихся элементов

419

31 декабря 2016, 16:02

Пишу сайт который полностью будет использовать ajax. Все работает до тех пор, пока я не загружаю новый элемент, при нажатии на который вызвается какая-то функция - он просто не работает, так как приходится снова отсеивать все элементы. Первый вариант - отлавливать изменения DOM, но я заметил что мои события плодятся, и нажатия на кнопку работают уже по нескольку раз. Работает таким образом:

document.getElementById("put").addEventListener("DOMSubtreeModified", function (event) {
  $('.list a, #ajax').click(function() {
    $("body").attr("style","-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);");
    path  = $(this).attr("href");
    $.ajax({
      url: path+'?ajax=true',
      success: function(data){
        json = jQuery.parseJSON(data);   
        $('.content').html(json.content);
        document.title = "HR | " + json.title;
        $('.list a').attr("class",null);
        $('.list a:contains("'+json.title+'")').attr("class","active");
        history.replaceState({back: location.pathname, next: path}, json.title, path);
        $(".side").html(json.sidebar);
        $("body").attr("style","");
      }
    });
    return false;
  });
}, false);

Подскажите как заставить это все работать нормально.

Если для кто-то не понял суть - вот демо.

Answer 1

Как обычно, используем делегирование событий - прикрепляем обработчик к родителю, который всегда существует, с указанием фильтра элементов, для которых предназначен этот обработчик (http://api.jquery.com/on/):

//document.getElementById("put").addEventListener("DOMSubtreeModified", function (event) {
  $("body").on("click", '.list a, #ajax', function() {
    $("body").attr("style","-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);");
    var path  = $(this).attr("href"); // !!! make it local variable
    $.ajax({
      url: path+'?ajax=true',
      success: function(data){
        json = jQuery.parseJSON(data);   
        $('.content').html(json.content);
        document.title = "HR | " + json.title;
        $('.list a').attr("class",null);
        $('.list a:contains("'+json.title+'")').attr("class","active");
        history.replaceState({back: location.pathname, next: path}, json.title, path);
        $(".side").html(json.sidebar);
        $("body").attr("style","");
      }
    });
    return false;
  });
//}, false);

PS: обратите внимание на var перед переменной path - в Вашем эта глобальная переменная может измениться между вызовом $.ajax и выполнением асинхронного обработчика success.