JQuery .on() - Клонирование динамического содержимого

Question

Я работаю над проектом, в котором пользователь может выполнять некоторые функции поиска в реальном времени. Когда отображаются результаты поиска в реальном времени, через JQuery Ajax, мне нужно, чтобы у пользователя была возможность щелкнуть один из отображаемых результатов и создать клон этого в другом месте на странице. Проблема, которую я нахожу, заключается в том, что эти новые результаты прямого поиска не обрабатываются при загрузке первой страницы, я считаю их «фантомным кодом», который не существует для DOM. Я провел некоторое исследование функций JQuery on(), а также функций bind(), но не уверен, как я могу реализовать их в своем собственном контексте.

Вот мой JQuery

$(".add").click(function() { 
     $(this).parent("li").clone(true).appendTo(".doc_list:first");      

}); 

В этом фрагменте кода (это) относится к моей кнопке, которая существует внутри элемента LI (родителя), который динамически созданный с помощью результатов поиска живых. Мне нужно скопировать этот элемент LI.

Если требуется больше кода, пожалуйста, дайте мне знать.

Answer 1

Как ваша кнопка .add добавлена ​​в DOM после загрузки страницы, т.е. динамически, поэтому вам нужен обработчик события делегата (он же живой).

$(".doc_list").on('click', '.add', function() { 
    $(this).parent("li").clone(true).appendTo(".doc_list:first"); 
}); 

Здесь я пользователь .doc_list в контейнере, но если .doc_list также динамический элемент, то заменить его каким-либо другим статическим элементом, который принадлежит к DOM на странице загрузки.

Answer 2

$("Static-container").on('click', '.add', function() { 
     $(this).parent("li").clone(true).appendTo(".doc_list:first");      
}); 

Static-container Где находится селектор до ближайших элементов, который содержит все динамически добавлены .add элементов.