Question

我有一个工作对话框弹出窗口，当用户点击ID为＆＃39; create-user＆＃39; （在此代码段的底部）：

<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＆＃39;创建用户＆＃39;就像我在表中所做的那样，它应该调用相同的addUser函数并打开对话框，但它不起作用。

~~~ UPDATE ~~~

我添加了这个功能，我认为这是一个绑定点击事件＆＃39;人们建议：

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

并在创建按钮时将id更改为create-user2：

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

但它仍然无效

Answer 1

您需要具有用于多个元素的相同ID。在将dom元素添加到页面后，您还需要绑定单击处理程序。

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

e.g。

<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中不断添加按钮元素，而无需更新事件处理程序。

Answer 2

新添加的按钮上的相同ID将允许它打开相同的对话框（当然还有it must be unique in a document）。

您需要attach an event handler喜欢：

var tblRow = $("<tr>" +
             "<td>" + name.val() + "<button id='create-user2' style='float:right' title='Delete' class='btn btn-danger btn-xs actionbutton'><span class='glyphicon glyphicon-remove'></span></button>" + "</td>" +
             "</tr>");

tblRow.find('button#create-user2').button().on('click', function() {
    dialog.dialog("open"); // where dialog is instance of jq dialog, dialog = $( "#dialog-form" ).dialog({...})
});

$( "#users tbody" ).append(tblRow);

从附加按钮调用时，jquery对话框不会弹出

2 个答案: