1

因此，我为 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() 事件，直到将按钮附加到文档中，所以当附加点击事件时，按钮元素肯定在 DOM 中。那么这个问题可能是由于没有为这些按钮设置 id 而导致的吗？这对我来说似乎很奇怪，因为我使用变量引用而不是 id 来附加事件。

4

2 回答 2

3

我要检查两件事。

首先，确保您没有两个具有相同 id 的元素。如果这样做，jquery 可能只绑定到第一个，或者根本不绑定。

其次，确保在jquery 尝试绑定 click 事件之前将元素添加到 dom 中。如果代码异步运行（如果您使用 ajax 很容易发生这种情况），那么您可能会尝试在创建元素之前绑定事件。Jquery 会找不到元素然后默默地放弃。

于 2013-07-01T02:56:00.287 回答
0

您应该使用.on()动态添加按钮

于 2013-07-01T02:50:41.790 回答