Как добавить функции делегата jQuery без копирования кода вставки

Question

У меня есть ряд анонимных функций jQuery / javascript для событий щелчков, которые должны динамически добавляться в качестве функции делегата к содержимому, возвращаемому командами ajax, и я обнаружил, что копирую много кода, которым сложно управлять ,

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

Я попытался создать отдельную функцию для удаления и вызвать ее так же, как в C, но не смог заставить это работать. Я также рассмотрел возможность разбить код на более мелкие блоки и затем использовать php для написания javascript, но это кажется довольно сложной вещью для того, что, по моему мнению, должно быть простым. Есть ли другой способ?

Любая помощь будет великолепна, извиняюсь, если это простое исправление

$(document).ready(function(){   
    $("a.delete").click(function(){
    //do stuff
    $.ajax({
        type: "GET",
        url: url,
        success: function(msg){
           //do more stuff
        }//end of success function
        });//end of ajax*/
    });//end of delete button

        $("button#addItem").click(function(){
        //do stuff
        $.ajax({
            type: "GET",
            url: url,
            dataType: "json",
            success: function(msg){
                //do stuff

                //form the id for the delete button
                var buttonID = "#delete" + msg.id;

                //need to attach the delete function to the new button to make sure the function is there
                $("body").delegate(buttonID, "click", function(){
                    //do stuff
                    $.ajax({
                        type: "GET",
                        url: url,
                        success: function(msg){
                            //do stuff
                        }//end of success function
                    });//end of ajax*/
                });//end of delegate function attaching to the delete button
            }//end of success function
        });//end of ajax
    });//end of add button
});//final close

Answer 1

Есть несколько вещей, которые вы можете сделать:

Именованные функции

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

$("a.delete").click(handleDelete);

// ...

$.ajax({
    // ...
    success: function(...) {
        $(some_selector).click(handleDelete);
    }
});

function handleDelete() {
    // ...do the deletion
}

И / или используйте делегирование события

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

$("a.delete").live("click", handleDelete);

Или, в идеале, подключите это к контейнеру, который содержит все эти ссылки для удаления:

$("selector_for_container").delegate("a.delete", "click", handleDelete);

, который говорит jQuery подключить событие «click» к документу, а затем, когдапроисходит щелчок, чтобы увидеть, соответствует ли фактический нажатый элемент селектору «a.delete» и, если это так, запустить обработчик.

Начиная с jQuery 1.7, вы скорее используете onчем live:

$(document.body).on("click", "a.delete", handleDelete);

Или в идеале, если есть более конкретный контейнер, чем тело документа:

$("selector_for_container").on("click", "a.delete", handleDelete);

(Обратите внимание, что порядок аргументов отличается от delegate.)

Answer 2

Присвойте всем вашим кнопкам удаления один и тот же класс, а затем просто поместите один метод делегата вне всех этих вызовов AJAX.

$('body').delegate('.deleteButton', 'click', function(){
    var id = this.id;
    // Do stuff...
});