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 - 动态添加按钮点击不起作用

回答

相关问题