JQuery позднего связывания

Question

У меня есть код, который связывает действие клика при загрузке страницы, это ссылка. Когда я нажимаю на него, он отправляет ajax-запрос и заменяет содержимое в некотором div функцией jquery append (). В этом новом контенте есть ссылки, и мне нужно связать с ними какое-то действие, но я не смог .. связывание не сработало, я думаю, потому что jquery append не обновляет дерево DOM. Как я могу получить позднюю привязку?

Answer 1

Есть 3 функции, которые могут сделать это:

• $(selector).live(events, data, handler); - jQuery 1.3+ - версия устарела: 1.7, удалена: 1.9 ( ссылка )
• $(document).delegate(selector, events, data, handler); - jQuery 1.4.3+ - Начиная с jQuery 1.7, метод .delegate () был заменен методом .on (). ( ссылка )
• $(document).on(events, selector, data, handler); - jQuery 1.7+ - предпочтительнее ( ссылка )

Как правило, рекомендуется использовать on(), и его использование является простым и, вероятно, предпочтительным способом.

1. Первый селектор должен существовать при вызове функции и не может быть удален, иначе событие также исчезнет (это может быть document).
2. Первый параметр - это событие (например, «щелчок»)
3. Второй параметр - это селектор, с которым вы хотите связать событие.
4. Затем, наконец, вы можете добавить некоторые пользовательские данные и функцию к событию.

Вот пример кода:

// Make sure the DOM is ready
$(function() {
    // Bind the click event to the function
    $(document).on("click", "a.class", function(event) {
        // Put your code here.
    });
});

Answer 2

Позднее связывание теперь доступно с использованием события live j (jQuery):

$('a.my-links-class').live('click', function() {
    // do your link action here
});

Answer 3

событие .live () было устарело для версий 1.9 и выше.

Для тех, кто использует более позднюю версию Jquery, они могут использовать событие .on () , оно работает примерно так же.

Answer 4

Метод .live в JQuery 1.9 устарел. Так что теперь вы можете делать так:

$("body").on("click", ".classname", function() { ... })

Answer 5

Вы можете использовать функцию jQuery 1.3 + $().live(event, function). $("a").live("click", myClickFunc) будет привязывать myClickFunc точно так же, как $("a").click(myClickFunc) или $("a").bind("click", myClickFunc), но события будут привязаны "вживую", поэтому элементы, добавленные в DOM после этого вызова функции, также будут связаны. Вы можете удалить связанные события в реальном времени с помощью $().die(). Для получения дополнительной информации о $ (). Live см. документацию для него .

Другой вариант - иметь функцию для привязки элементов в определенном контексте (используя редко используемый второй параметр функции $ selector):

function myBindEvents(context) {
     $("a", context).click(myClickFunc);
}

и вызывайте его всякий раз, когда вы обновляете элемент с помощью AJAX:

$("<div>").load("...", "...", function(){myBindEvents(this);});

Надеюсь, это поможет. :)

Answer 6

Вам необходимо использовать функцию jQuery live, которая связывает событие со всеми элементами, которые соответствуют селектору, независимо от того, когда они были созданы.

Answer 7

В моем случае я использую библиотеку js, так как у меня есть переменная элемента, а код был похож на

$(element).click(function(){
    //some action
});

но это не работает с моим поздним обязательным элементом. Итак, я наконец-то использую core js click event

element.addEventListener('click', function() {
    //My some action
}, false);