/ / прикрепване на събитие за динамичен елемент в JQuery - jquery

задължително събитие за кликване за динамичен елемент в JQuery - jquery

Имам div, който се зарежда динамично след извикване на AJAX повикване чрез .html атрибут

$("#gallery").html(imagesHtml);

insdie imagesHtml i ave 2 бутона, наречени "prebtn" и "nxtbtn", сега се опитвам да свържа тези бутони със следния синтаксис в JQuery:

$("#gallery").bind("click", "#nxtbtn", function() {
alert("next");
});

и

$("#gallery").bind("click", "#prebtn", function() {
alert("previous");
});

но ако натискам един от бутоните, двата събития се задействат и той показва allert за "next" и "previous"; howevr Имам кликнете само един от бутоните!

Моля, уведомете ме, ако се нуждаете от повече разяснения.

Благодаря

Отговори:

3 за отговор № 1

Вие обърквате bind и on методи. Изглеждат подобни, но bind има по-малко функционалност: не поддържа делегиране на събития. Вторият аргумент не е селектора за делегираните събития, но data аргумент.

Това ще работи:

$("#gallery").on("click", "#nxtbtn", function() {

0 за отговор № 2

Мисля, че сте решили да го използвате .on() вместо:

$("#gallery").on("click", "#nxtbtn", function() {
alert("next");
});
$("#gallery").on("click", "#prebtn", function() {
alert("previous");
});

Най- bind() Функцията ще се свърже с елемента в началния селектор, в този случай #gallery, Така че вие ​​обвързвате двете функции с това събитие. Технически това е и какво .on() прави, но използва втория аргумент като филтър за елемента, който е задействал събитието. Не мисля .bind() прави това, мисля, че вторият аргумент е само данни, които вашите функции за обработване на събития игнорират.


0 за отговор № 3

трябва да използвате за вместо да ги използвате свързват за да работи върху динамично създадени елементи. докато e.preventDefault () ще предотврати задействането по подразбиране на съответното събитие.

$("#gallery").on("click", "#nxtbtn", function(e) {
e.preventDefault();
alert("next");
});

и

$("#gallery").on("click", "#prebtn", function(e) {
e.preventDefault();
alert("previous");
});