當有多個動態添加的按鈕時，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將無法找到該元素，然後默默放棄。