JQuery：選擇動態創建的元素並推送到Firebase

初學者，所有這一切，玩弄Firebase。基本上，我想從Firebase檢索文本條目並在其旁邊有一個「批准」按鈕。點擊該按鈕後，我希望將該特定文本條目推送到新的Firebase位置，並將該文本從頁面中移除。我正在動態創建按鈕和文本，並且在選擇按鈕和創建的div時遇到了一些麻煩。我知道我必須使用on（），但我不確定如何使用它。JQuery：選擇動態創建的元素並推送到Firebase

謝謝！

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(); 

});

來源

2013-07-10 Sam

你有你的動態添加元素的容器，它已經在頁面上，當你加載它結合.on()，並且有它這樣的：

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

來源

2013-07-10 01:59:36

要展開，第一個參數對（）是事件，第二個是一個「選擇器」，其如果存在的話，代表的事件到該元素的子元素，即使它們是在未來添加 – Kato

Ito pala yun。:) –

另一種選擇，更容易理解，那麼強大，也非常有效，就是當你創建元素的情況下簡單綁定：

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')); 
});

另外一個問題你要碰上，假設有將不止一個在頁面上，這是你在記錄中使用ID。如果它們不是唯一的，它們會發生衝突。

一個很好的選擇是使用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')); 
});

來源

2013-07-10 02:27:56 Kato

您的.on()沒有用，因爲您正在動態添加按鈕。您無法直接使用像$('#approve')那樣的元素ID選擇器來查找動態添加的元素。所以你應該綁定.on()與$(document)選擇器。這將始終包含您動態添加的元素。

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

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

來源

2017-08-22 05:01:57 Keerthi

JQuery：選擇動態創建的元素並推送到Firebase

回答

相關問題