javascript - 从附加按钮调用时不弹出 jquery 对话框

Question

我有一个工作对话框弹出窗口，当用户单击 ID 为“create-user”的按钮(在此代码段的底部)时，该对话框会打开:

<div id="users-contain" class="ui-widget">
    <div class="editor-label">
        <label>Form Owners</label>
    </div>
    <table style="width: 40%; border: 1px solid #dddddd; border-collapse: collapse;" id="users" class="table">
        <thead>
            <tr style="border: 1px solid #dddddd; text-align: left; " class="ui-widget-header ">
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
            </tr>
        </tbody>
    </table>
</div>
<br />
<button id="create-user">Add Owner</button>

当用户单击上表一行中的删除按钮时，我试图打开相同的对话框，该对话框在页面的初始加载时不存在，但在用户向表中添加名称后附加:

    function addUser() {
        var valid = true;
        allFields.removeClass( "ui-state-error" );

        $( "#users tbody" ).append( "<tr>" +
            "<td>" + name.val() + "<button id='create-user' style='float:right' title='Delete' class='btn btn-danger btn-xs actionbutton'><span class='glyphicon glyphicon-remove'></span></button>" + "</td>" +
            "</tr>" );
        $("#owners").val($('#owners').val() + name.val() + ";");
        dialog.dialog("close");
    }

正如你在行中所见

"<td>" + name.val() + "<button id='create-user' style='float:right'

我分配了与表中相同的 ID“create-user”，它应该调用相同的 addUser 函数并打开对话框，但它不起作用。

~~~更新~~~

我添加了这个功能，我认为这是人们建议的“绑定(bind)点击事件”:

    $("#create-user2").button().on("click", function () {
        dialog.dialog("open");
    });

并在创建按钮时将上面的 id 更改为 create-user2:

"<button id='create-user2' style='float:right'...

但是还是不行

Answer 1

您不需要为多个元素使用相同的 ID。您还需要在将 dom 元素添加到页面后绑定(bind)点击处理程序。

您可以使用委托(delegate)事件处理程序，将事件监听器绑定(bind)到 DOM 层次结构中较高的元素，该元素正在监听其子级触发的所有事件。

例如

<div id="outerElement">
  <button class="btn">First</button>
  <button class="btn">Second</button>
</div>

$('#outerElement').on('click', '.btn', function(e){
  console.log(e.target);
})

在此示例中，您可以在 .outerElement div 中不断添加按钮元素，而无需更新您的事件处理程序。