[英]onclick event won't fire when there is more than one dynamically added button
因此,我为Firebase数据库中的每个数据节点(“轮询”)动态添加了EDIT和REMOVE按钮。 我有一个使用jQuery将onclick侦听器分配给这些函数的函数,但奇怪的是,仅在碰巧只有一个节点(因此只有一对EDIT / REMOVE按钮)时才触发该事件。 当有多个节点和多对按钮时,不会触发任何按钮。 这是将事件添加到按钮的JavaScript代码...
function displayCurrentPollsForEditing(pollsRef)
{
var tbl = createTable();
var th = ('<th>Polls</th>');
$(th).attr('colspan', '3');
$(th).appendTo($(tbl).children('thead'));
pollsRef.once('value', function(pollsSnapshot) {
pollsSnapshot.forEach(function(pollsChild) {
var type = pollsChild.name();
// If this is true if means we have a poll node
if ($.trim(type) !== "NumPolls")
{
// Create variables
var pollRef = pollsRef.child(type);
var pollName = pollsChild.val().Name;
var btnEditPoll = $('<button>EDIT</button>');
var btnRemovePoll = $('<button>REMOVE</button>');
var tr = $('<tr></tr>');
var voterColumn = $('<td></td>');
var editColumn = $('<td></td>');
var rmvColumn = $('<td></td>');
// Append text and set attributes and listeners
$(voterColumn).text(pollName);
$(voterColumn).attr('width', '300px');
$(btnEditPoll).attr({
'class': 'formee-table-button',
'font-size': '1.0em'
});
$(btnRemovePoll).attr({
'class': 'formee-table-remove-button',
'font-size': '1.0em'
});
$(btnEditPoll).appendTo($(editColumn));
$(btnRemovePoll).appendTo($(rmvColumn));
// Append to row and row to table body
$(tr).append(voterColumn).append(editColumn).append(rmvColumn);
$(tr).appendTo($(tbl).children('tbody'));
// Append table to div to be displayed
$('div#divEditPoll fieldset#selectPoll div#appendPolls').empty();
$(tbl).appendTo('div#divEditPoll fieldset#selectPoll div#appendPolls');
$(btnEditPoll).click(function() {
displayPollEditOptions(pollRef);
return false;
});
$(btnRemovePoll).click(function() {
deletePoll($(this), pollsRef);
return false;
});
}
});
});
}
标记将类似于以下内容...
<div id="divEditPoll">
<form class="formee" action="">
<fieldset id="selectPoll">
<legend>SELECT A POLL</legend>
<div class="formee-msg-success">
</div>
<div class="grid-12-12" id="appendPolls">
</div>
</fieldset>
</div>
编辑-因此,我已经切换了几行,现在在按钮附加到文档之前,我不设置click()事件,因此在附加click事件时,按钮元素肯定在DOM中。 那么是否可能由于未为这些按钮设置ID而导致此问题? 这对我来说似乎很奇怪,因为我使用变量引用而不是id来附加事件。
我要检查两件事。
首先,请确保您没有两个具有相同ID的元素。 如果这样做,jquery可能仅绑定到第一个,或者根本不绑定。
其次, 在 jquery尝试绑定click事件之前 ,确保将元素添加到dom中。 如果代码异步运行(如果使用的是ajax,则很容易发生),那么您可能在创建元素之前尝试绑定事件。 jQuery将无法找到该元素,然后将其静默地放弃。
您应该使用.on()来动态添加按钮
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.