当有多个动态添加的按钮时，onclick事件不会触发

Question

因此，我已经为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来附加事件。

Answer 1

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

Answer 2

有两件事情我会检查。

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

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