Привязка щелчка к динамически созданному div не работает

Я настроил это, чтобы привязать щелчок к якорю внутри любых динамически созданных div с классом «expFold».

$('body').ready(function()
{
    $('.expFold').on('click', 'a', function (event) {
    alert('here');      
});
}

Я жестко запрограммировал div на страницу, чтобы проверить, работает ли щелчок...

<div class="expFold"><a href="#">▼</a></div>

И это так.

Однако любые div, добавленные позже, вот так...

$("#myParentDiv").append('<div class="expFold"><a href="#">▼</a></div>');

... не реагировать на щелчок.

Что-нибудь очевидное выскакивает относительно того, почему они не отвечают?

Спасибо за ваше время и помощь.


jquery bind
person Shaun    schedule 11.04.2014    source источник
comment
Только текущий документ имеет готовый обработчик   -  person adeneo    schedule 11.04.2014

Ответы (4)


arrow_upward
3
arrow_downward

Вам нужно делегирование событий. попробуй это:

$('#myParentDiv').on('click', '.expFold a', function (event) {
  alert('here');
});
person Milind Anantwar    schedule 11.04.2014
comment
Это называется делегированием событий, вся информация здесь - person Stphane; 11.04.2014

arrow_upward
1
arrow_downward

Поскольку ваш div создается динамически в DOM, событие click не будет доступно для этих ссылок. В этом случае делегирование события поможет вам прикрепить это событие.

Попробуй это

$(document).ready(function () {
    $(document).on('click', ".expFold a", function (e) {

        alert('working');
    });
});
person Sridhar R    schedule 11.04.2014

arrow_upward
0
arrow_downward

Сначала поместите свой код привязки в функцию:

function bidingDivClick(){
   $('.expFold').on('click', '.expFold a', function (event) {
    alert('here');      
});
}

После этого вызовите эту функцию при добавлении div в ваш html:

$("#myParentDiv").append('<div class="expFold"><a href="#">▼</a></div>');
bidingDivClick();
person Saman Gholami    schedule 11.04.2014

arrow_upward
0
arrow_downward

Еще один способ делегировать свое мероприятие...

$(function(){
    $(this).on('click', function (e) {
        var $t = $(e.target), doc = this;
        // Testing whether the element that triggered the event was what an anchor inside a ".exFold"
        if($t.is('.expFold a')){
            alert('Anchor clicked !');
        }

    });
});
person Stphane    schedule 11.04.2014