jQuery - 動態添加按鈕點擊不起作用

我寫了下面的代碼，創建一個帶動態添加內容的彈出窗口。現在我想刪除這些添加的項目或編輯它們，但似乎沒有點擊點擊其中一個按鈕(btnLSM_Remove + btnLSM_Edit)的事件。任何線索爲何如此？ btnLSM_Add和btnLSM_Okay工作以同樣的方式和他們做的工作......jQuery - 動態添加按鈕點擊不起作用

function ListManagementDialog(obj, dialogTitle, dialogText, listDelimiter, btnNames) { 
    if (!$.isArray(btnNames)) {   
     return false; 
    } 

    if (dialogConfirmed) { 
     return false; 
    } 

    btns[btnNames[0]] = function() { 
     $(this).dialog('close'); 
     dialogConfirmed = true; 
     if (obj) { 
      obj.click(); 
     } 
    }; 

    btns[btnNames[1]] = function() { 
     $(this).dialog('close'); 
    }; 



    $('body').append(String.Format('<div id="divLSM_Dialog" title="{0}"><p>{1}</p>' + 
     '<button id="btnLSM_Add" class="btnAdd" type="button" role="button" aria-disabled="false" title="Hinzuf&#252;gen" />' +    
     '<input id="txbLSM_Emailadresse" class="text ui-widget-content ui-corner-all" type="text" name="txbLSM_Emailadresse" style="display:none;">' + 
     '<button id="btnLSM_Okay" class="btnOkay" type="button" role="button" aria-disabled="false" title="&#220;bernehmen" style="display:none;" />' + 
     '<br /><br />' + 
     '<table id="tblLSM_Items" class="ui-widget ui-widget-content">' + 
       '<thead>' + 
         '<tr class="ui-widget-header ">' + 
       '<th>Emailadresse</th>' + 
       '<th />' + 
       '</tr>' + 
      '</thead>' + 
      '<tbody />' + 
     '</table>' + 
     '</div>', dialogTitle, dialogText)); 

    $('#btnLSM_Add').click(function() { 
     $('#txbLSM_Emailadresse').val(''); 
     $('#txbLSM_Emailadresse').show(); 
     $('#btnLSM_Okay').show(); 
     $('#txbLSM_Emailadresse').focus(); 
    }); 

    $('#btnLSM_Okay').click(function() { 
     $('#tblLSM_Items tbody').append('<tr>' + 
      '<td>' + $('#txbLSM_Emailadresse').val() + '</td>' + 
      '<td>' + '<button id="btnLSM_Remove" class="btnRemove" type="button" role="button" aria-disabled="false" title="Entfernen" />' + '<button id="btnLSM_Change" class="btnEdit" type="button" role="button" aria-disabled="false" title="&#196;ndern" />' + '</td>' + 
      '</tr>'); 

     $('#txbLSM_Emailadresse').hide(); 
     $('#btnLSM_Okay').hide(); 
    }); 

    $('#btnLSM_Remove').click(function() { 
     alert("hohoho"); //no alert-popup 
    }); 

    $('#btnLSM_Change').click(function() { 
     alert("hohoho"); //no alert-popup 
    }); 

    $('#divLSM_Dialog').dialog({ 
     modal: true, 
     resizable: false, 
     draggable: true, 
     width: 600, 
     height: 300, 
     close: function (event, ui) { 
      $('body').find('#divLSM_Dialog').remove(); 
     }, 
     buttons: btns 
    }); 

    return dialogConfirmed; 
}

來源

2012-10-04 UNeverNo

你btnLSM_Remove按鈕不會當你調用

$('#btnLSM_Remove').click(function() {

存在，因此$('#btnLSM_Remove')集合爲空和處理程序被添加到沒有。

您可以使用on功能：

$('#divLSM_Dialog').on('click', '#btnLSM_Remove', function() {

註冊將應用於代表團定義之後出現一個按鈕的處理程序。

編輯：

在jQuery的1.6.2，您可以使用live：

$('#btnLSM_Remove').live('click', function() {

來源

2012-10-04 17:56:29

它可能工作，但不幸的是，我們仍然使用1.6.2，當我嘗試改變，要1.8.2我的整個彈出不知何故不起作用。任何想法爲何如此？ – UNeverNo

很難說爲什麼你的代碼在1.6.2而不是1.8.2中工作，但我編輯了我的答案，給出了jQuery 1.6.2的工作語法。 –

因爲它似乎「正常」的對話也沒有工作。是否有從1.6.2到1.8.2的變化？還是我需要獲取最新的jQuery UI？目前我們使用1.8.16。 – UNeverNo

jQuery - 動態添加按鈕點擊不起作用

回答

相關問題