Блог

Главная - Вопросы по программированию - jquery append, похоже, портит мой код

jquery append, похоже, портит мой код

#jquery

#jquery

Вопрос:

привет, я пытаюсь динамически добавлять некоторые divs, а затем использовать для них jquery, например, событие click, но это не работает, я понятия не имею, почему он действует таким образом..

 $("#addGenreFinal").click(function () {
     var genre = $('#newGenreTxt').val();
     $("#txtAddGenreContainer").slideUp();
     $('#otherFavContainer').append('<div class="songTilesGenreContainer"><div class="addSongsBtnContainer icons" ><img src="../../Content/images/add.png"             style="padding:10px;"/></div><div style="float:right;padding-right:26px;padding-    bottom:20px;margin-top:20px;color:#949494;font-size:20px;">'   genre   '</div></div>');
     $('#newGenreTxt').val('');
    });

    $(".songTilesGenreContainer").click(function () {
        alert('hello'); 
    });

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

Комментарии:

1. спасибо всем потрясающим: D только что узнал что-то новое

2. Похоже, вам понравился ответ. Если это так, пожалуйста, примите ответ. Это удалит вопрос из списка неотвеченных и поощрит дальнейшую помощь в будущем.

Ответ №1:

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

 $(".songTilesGenreContainer").live("click", function () {
    alert('hello'); 
});

Ответ №2:

 $(".songTilesGenreContainer").live("click", function () {
        alert('hello'); 
    });

Попробуйте использовать live вместо .click. .click выполняет привязку за кулисами. Поскольку .bind привязывается только к элементам в этом селекторе, которые существуют в DOM во время выполнения, он не найдет ваш динамический контент. .live будет прикрепляться к элементам, добавленным в dom, даже ПОСЛЕ запуска кода.

Ответ №3:

 $(".songTilesGenreContainer").click(function () {
    alert('hello'); 
});

Должно измениться на:

 $(".songTilesGenreContainer").live('click', function () {
    alert('hello'); 
});

Потому что элемент, к которому вы пытались привязаться, не существовал при выполнении приведенного выше кода. .live() предназначен именно для этой цели:

Прикрепите обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем

Вот ссылка на документацию jQuery для .live() : http://api.jquery.com/live /

.delegate() это предпочтительный метод, если у вас есть элемент контейнера для элемента, к которому вы привязываетесь. Вместо того, чтобы всплывать вплоть до объекта document, .delegate() событие будет всплывать до выбранного корневого элемента. Документы: http://api.jquery.com/delegate /

Пример с .delegate() 

 $('#otherFavContainer').delegate(".songTilesGenreContainer", 'click', function () {
    alert('hello'); 
});

Ответ №4:

Вы должны добавить обработчик кликов в контейнер жанра после добавления; поскольку вы добавляете его вне обработчика #addGenreFinal кликов, он ни к чему не добавляется.

Вы также можете использовать функцию .live() (docs) для добавления обработчика к селекторам, которые еще не были созданы.

Метки: