Вопрос по jquery, dynamically-generated, firebase – JQuery: выбор динамически создаваемых элементов и отправка в Firebase

11

Новичок во всем этом, играя с Firebase. По сути, я хочу получить текстовые записи из Firebase, и рядом с ними есть кнопка «Подтвердить». Когда кнопка нажата, я хочу, чтобы эта конкретная текстовая запись была перемещена в новое местоположение Firebase, а текст был удален со страницы. Я создаю кнопку и текст динамически, и у меня возникают проблемы с выбором кнопки и созданных мной элементов div. Я знаю, что должен использовать on (), но я не уверен, как его использовать.

Спасибо!

approveRef.on('child_added', function(snapshot) {
 var posts = snapshot.val();
 $('<div id="post">').text(posts.text).append('<button style ="button" id="approve">Approve</button>').appendTo($('#feed'));
});

$('#approve').on("click", function(){
    var text = $('#post').val();
    postsRef.push({'text':text});
    $('#post').remove();

});

Ваш Ответ

3   ответа
22

Вы должны связать.on() в контейнере вашего динамически добавляемого элемента, который уже находится на странице, когда вы его загружаете, и он выглядит так:

$('#yourContainer').on('click', '#approve', function(){
    //your code here..
});
Ито Пала Юн. :) Christian Mark
Для расширения первый аргумент on () - это событие, второй - «селектор», который, если присутствует, делегирует события дочерним элементам этого элемента, даже если они будут добавлены в будущем. Kato
2

более простая для понимания, менее мощная, также совершенно правильная, - просто связать событие при создании элемента:

approveRef.on('child_added', function(snapshot) {
 var posts = snapshot.val();
 var $button = $('<button style ="button" id="approve">Approve</button>');
 $button.on("click", function(){
    var text = $('#post').val();
    postsRef.push({'text':text});
    $('#post').remove();
 });

 $('<div id="post">').text(posts.text).append($button).appendTo($('#feed'));
});

Другая проблема, с которой вы столкнетесь, предполагая, что на странице будет более одного из них, заключается в том, что вы используете идентификаторы в записях. Они будут конфликтовать, если они не уникальны.

Отличная альтернатива - ссылаться на эти элементы с помощью тегов data- * или других идентифицирующих характеристик, таких как теги css. Но в вашем случае они вам вообще не нужны!

approveRef.on('child_added', function(snapshot) {
 var posts = snapshot.val();
 var id = snapshot.name();

 var $button = $('<button style="button">Approve</button>');
 $button.on("click", function(){
    // use parent.closest(...) in place of an ID here!
    var text = $(this).parent().closest('textarea').val();
    postsRef.push({'text':text});
    $(this).parent().remove();
 });

 /* just an example of how to use a data-* tag; I could now refer to this element using:
    $('#feed').find('[data-record="'+id+'"]') if I needed to find it */
 $('<div data-record="'+id+'">').text(posts.text).append($button).appendTo($('#feed'));
});
Я не согласен с тем, что это проще понять, и это кажется излишне сложным, когда правильная привязка команды .on () будет работать просто отлично. freeworlder
5

.on() не работает, потому что вы добавляете кнопку динамически. Вы не можете найти динамически добавленные элементы напрямую, используя этот селектор идентификатора элементов, например$('#approve'), Так что вы должны связать.on() с участием$(document) селектор. Это всегда будет содержать ваши динамически добавленные элементы.

$(document).on( eventName, selector, function(){} );

$(document).on('click','#approve',function(){
//your code here
});

Похожие вопросы