JQuery onclick не запускает динамически вставленные элементы HTML?

Работает onclick. Однако, когда это событие onclick находится на динамическом HTML, оно больше не работает. Как и в: ничего не происходит.

$(document).ready(function () {
    $("#guestlist .viewguestdetails").click(function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});

Затем я динамически добавляю этот HTML-код на страницу:

<div id="guestlist">    
    <span class="completeguestdetails" data-id="18">(add your data)</span>  
        <div class="guestdetails" data-id="18" style="display: none;">
            some data
        </div>
</div>

Однако, когда я затем нажимаю "Добавить свои данные", ничего не происходит. Когда у меня есть HTML статически на моей странице, это переключение div "guestdetails" действительно работает. Кажется, что к динамически вставленному HTML не добавлено событие?

UPDATE:

Новый динамический HTML, в который я вставляю строку в существующую таблицу. Другие строки уже имеют события, связанные с событиями onclick, например:

$("span.guestattendance").click(function () {
    if ($(this).hasClass('checkbox-on')) {
        $(this).removeClass('checkbox-on').addClass('checkbox-off');
        $("#guestday").removeClass('checkbox-on').addClass('checkbox-off');
    }
    else {
        $(this).removeClass('checkbox-off').addClass('checkbox-on');            
        if ($("#guestceremony").hasClass('checkbox-on') && $("#guestreception").hasClass('checkbox-on') &&
        $("#guestdiner").hasClass('checkbox-on') && $("#guestparty").hasClass('checkbox-on')) {
            $("#guestday").removeClass('checkbox-off').addClass('checkbox-on');
        }
    }
});

Поскольку пользователь может вставить более 1 строки, я не использовал идентификатор, но добавил добавленную оболочку вокруг элемента, который я вставляю:

а затем в функции ready():

$('.newrow_wrapper').on('click', 'span', function () {
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle();
});

Однако первая проблема заключается в том, что, по-видимому, когда я обертываю div вокруг тега tr, все теги tr и td удаляются из вставленного HTML! Также, когда я нажимаю прокрутку для просмотра гостевых элементов, ничего не происходит.

Ответ 1

Сделайте это:

 $( '#wrapper' ).on( 'click', 'a', function () { ... });

где #wrapper - это статический элемент, в который вы добавляете динамические ссылки.

Итак, у вас есть оболочка, которая жестко закодирована в исходный код HTML:

<div id="wrapper"></div>

и вы заполняете его динамическим контентом. Идея состоит в том, чтобы делегировать события этой оболочке вместо привязки обработчиков непосредственно к динамическим элементам.

Ответ 2

Используйте .on() для присоединения обработчиков событий, которые динамически связывают элементы html. Вот ссылка для документации http://api.jquery.com/on/

напишите что-нибудь вроде этого

      $( '#someid' ).on( 'click', function () { ... });

или что-то вроде этого.

          $(document).on( 'click', 'tag_name', function () { ... });

Ответ 3

jQuery.on() используется для привязки любого события к динамически вставленным элементам HTML. Используйте его так:

$(document).ready(function () {
    $(document).on('click',"#guestlist .viewguestdetails",function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});