JQuery .load () делает содержимое не кликабельным после загрузки

Question

У меня есть страница, на которой у меня есть div.Содержимое этого div заполняется страницей включений, и эта страница включает вызов базы данных для извлечения контента.

Когда пользователь нажимает кнопку «Добавить задачу», для вставки содержимого в базу данных выполняется ajax-вызов, а div, который показывает все задачи, обновляется с помощью .load ().Тот же процесс происходит для «удаления задачи»;сделан еще один ajax-вызов, который удаляет строку из базы данных, и div обновляется с помощью .load ().

Я вижу вставки и удаления в моей таблице базы данных, но интерфейс немного шаткий,Когда страница загружается в первый раз, я могу выполнять неограниченное количество действий добавления, и все новые задачи отображаются в div.Однако я могу сделать только одно действие «удалить»;после первой попытки я просто не могу выбрать элемент из div.

Вот код "add":

$("#accept_new_task").click(function(){
    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, add a new item to task list and clear input
        function(data) {

            //Clear input
            $("#new_task_name").val('');
            $("#new_task_description").val('');

            //Show new task
            $('#newly_added_tasks').load('[page on server]', function() {
            });             



        });

    jQuery.ajaxSetup({async: true});    
});

И код "delete":

//Deletes recently added task
$(".newtask").click(function(){
    alert('!');  //to test
    var val = $(this).attr('value');

    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, refresh div 
        function(data) {
            $('#newly_added_tasks').load('[page on server]', function() {
                alert('Load was performed.');
            });                             
        });     

    jQuery.ajaxSetup({async: true});  

});

Загружаемое содержимое представляет собой таблицу, созданную с содержимым, извлеченным из вызова базы данных.Вот фрагмент:

<td>'.$task[$i]['name'].'</td>
<td>'.$task[$i]['description'].'</td>
<td><input type="button" class="newtask" name="accept_new_task" id="task_'.$task[$i]['task_id'].'" value="'.$task[$i]['task_id'].'"></td>

Любая помощь будет оценена.

Answer 1

Событие jQuery .click не является активным событием, поэтому оно будет активировать только элементы, для которых оно было присвоено. После обновления, удаления или поступления новых элементов у обновленных элементов не будет события щелчка, а у новых элементов не будет события щелчка.

Вы захотите использовать событие jQuery .on , которое является заменой для события .live. Таким образом, когда содержимое обновится, к нему все равно будет прикреплено событие click.

Другой вариант - назначить событие click при обновлении содержимого.

Answer 2

изменить эту строку

$(".newtask").click(function(){

до

$(document).on(".newtask","click",function(){

или используйте делегат

$(document).delegate("click",".newtask",function(){

причина в том, что динамически добавленные элементы не привязываются к обработчикам событий. Используйте on, если вы используете jQuery 1.7 + , в противном случае используйте delegate

Answer 3

это будет работать с этим

$(document).on("click",".newtask",function(){

или

$(document).delegate(".newtask","click",function(){