JQuery на() не работает уже добавили DOM элементы

Question

У меня есть это:

$(document).on("click", ".prev", function(){ 
    $(this).closest("div").find(".slider").animate({ 
     "left": "+=450px" 
    }, 800, "easeInOutBack"); 
    return false; 
}); 

Который работает, когда добавляются новые элементы в DOM, но она не работает для элементов, которые уже DOM.

Когда я делаю это:

$(".prev").on("click", function(){ 
    $(this).closest("div").find(".slider").animate({ 
     "left": "+=450px" 
    }, 800, "easeInOutBack"); 
    return false; 
}); 

Он работает для элементов в DOM, но не новые, добавленные в DOM. Есть ли способ для меня заставить это работать для обоих без меня, чтобы написать это 2 раза или позвонить другой функции?

Вот снимок экрана:

Итак, Вот более подробно описание того, как это работает.

<div id="simple-pevs" style="padding-right: 20px;"> 
    <?php require_once __DIR__ . "/data/get/PEVSection.php"; ?> 
</div> 

Тогда Когда кто-то хочет добавить еще один раздел, они нажмите на кнопку добавления, которая затем запускает этот код:

$(".add-another-pev").click(function(){ 
     $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){ 
      $("#simple-pevs").append(data); 
     }); 
     pevGroup++; 
     return false; 
    }); 

Как вы можете видеть, что это звонит тот же, который был предварительно загружен в php. Новый один работает (и добавил любые другие дополнительные) с событием щелчка и кулак один не делает

@ArunPJohny

console.log($(".prev")); после того, как новый элемент добавляется:

[a.prev, a.prev, prevObject: b.fn.b.init[1], context: document, selector: ".prev", jquery: "1.9.1", constructor: function…] 
0: a.prev 
1: a.prev 
context: #document 
length: 2 
prevObject: b.fn.b.init[1] 
selector: ".prev" 
__proto__: Object[0] 

Answer 1

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

function bindHandler() { 
    $(document).on("click", ".prev", function(){ 
     $(this).closest("div").find(".slider").animate({ 
      "left": "+=450px" 
     }, 800, "easeInOutBack"); 
     return false; 
    }); 
} 
bindHandler(); 

$(".add-another-pev").click(function(){ 
    $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){ 
     $("#simple-pevs").append(data); 
    }); 
    pevGroup++; 

    bindHandler(); 
    return false; 
}); 

Answer 2

Ниже содержание, которое я скопировал с официального сайта JQuery, он может объяснить это очень четко: Обработчики событий связаны только с выбранных элементов; они должны существовать на странице в момент, когда ваш код выполняет вызов .on(). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните привязку событий внутри документа, готового к обработке для элементов, которые находятся в разметке HTML на странице. Если на страницу вводится новый HTML-код, выберите элементы и присоедините обработчики событий после того, как новый HTML-адрес будет помещен на страницу. Или используйте делегированные события для присоединения обработчика событий, как описано ниже.

Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позднее. Выбирая элемент, который, как гарантируется, присутствует в момент присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий. Этот элемент может быть элементом контейнера представления в дизайне Model-View-Controller, например, или документом, если обработчик события хочет контролировать все события пузырьков в документе. Элемент документа доступен в начале документа перед загрузкой любого другого HTML-кода, поэтому безопасно присоединять туда события, не дожидаясь готовности документа.

В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, другим преимуществом делегированных событий является их потенциал для значительно более низких накладных расходов, когда необходимо контролировать многие элементы. На таблице данных с 1000 строк в его TBODY, этот пример придает обработчик 1000 элементов:

$("#dataTable tbody tr").on("click", function(event){ 
alert($(this).text()); 
}); 

делегированных-событие подход придает обработчик событий только к одному элементу, в TBODY, и событию нужно только пузырь на один уровень вверх (от щелкнули тра к TBODY):

$("#dataTable tbody").on("click", "tr", function(event){ 
alert($(this).text()); 
}); 

примечания: Делегирование событие не работает для SVG.

http://api.jquery.com/on/