jquery - 动态添加的按钮(使用 jQuery)必须单击两次才能触发已绑定(bind)到按钮的单击事件

Question

我动态添加一个选择按钮，单击该按钮可以从附加到表格的列表中选择给定的联系人。

我必须先单击文档中的任意位置，然后才能单击动态添加的按钮。显然，动态按钮的绑定(bind)事件直到第一次单击后才绑定(bind)。

顺便说一句，在当前版本的函数中，我为每个动态按钮将单击事件绑定(bind)到文档正文，然后查看事件目标是否是相关的动态按钮，此时我触发所需的函数传回选定的联系人。我根据给其他经历过我在这里描述的同样事情的人的建议转向了这种方法。在此实现之前，我有一个非常传统的 $J("#btnId").bind('click', { .... }, function (event) { ... });绑定(bind)单击事件的方法，这导致了在动态按钮上触发单击事件之前必须单击两次的相同体验。我还从其他角度使用 jQuery 的 .bind、.live、.delegate 方法来解决这个问题，并且在所有情况下，我都必须单击两次才能真正触发按钮的单击事件。

function PickContacts() {
    if ($J("#tblCp").length > 0) {
        var broad = $J("#chkCpBroad").prop("checked");
        var contactType = GetCheckBoxListValues("divCpContactType");
        var contactId = "";
        if ($J("#txtCpContactId").length > 0) {
            contactId = $J("#txtCpContactId").val();
        }
        var contactName = $J("#txtCpContactName").val();
        var firstName = $J("#txtCpFirstName").val();
        var lastName = $J("#txtCpLastName").val();
        var email = $J("#txtCpEmail").val();
        var allMatches = $J("#chkCpAllMatches").prop("checked");
        var rows = ParseInts($J("#txtCpRowsReturned").val(), 10);
        if (rows === 0) {
            rows = 15;
        }
        var crmSeatsOnly = false;
        if (cpCrmSeatsOnly !== null && cpCrmSeatsOnly === "Y") {
            crmSeatsOnly = true;
        }
        var tbl = $J("#tblCpResults");
        tbl.empty();
        if (contactId !== "" || contactName !== "" || firstName !== "" || lastName !== "" || email !== "") {
            $J.ajax({
                type: "POST",
                url: "/ClientBin/Contact.asmx/ContactPicker",
                data: "{'broad':" + broad + ",'contactType':'" + contactType + "','contactId':'" + contactId + "','contactName':'" + contactName + "','firstName':'" + firstName + "','lastName':'" + lastName + "','email':'" + email + "','allMatches':" + allMatches + ",'crmSeatsOnly':" + crmSeatsOnly + ",'rows':" + rows + "}",
                contentType: "application/json; charset=utf-8",
                context: tbl,
                success: function (result) {
                    if (result.d !== "TIME OUT") {
                        var JObject = ParseJson(result.d);
                        if (JObject !== null) {
                            if (JObject.RESULT[0].SUCCESS) {
                                var alternatingRow = false;
                                var c = JObject.CONTACT;
                                for (i = 0; i < c.length; i++) {
                                    var trStyle = "rowstyleNoBorder";
                                    if (alternatingRow) {
                                        trStyle = "alternatingrowstyleNoBorder";
                                        alternatingRow = false;
                                    }
                                    else {
                                        alternatingRow = true;
                                    }

                                    this.append('<tr class="' + trStyle + '"><td><span id="lblCpContactId' + i + '">' + c[i].CONTACT_ID + '</span></td><td><span id="lblCpContactName' + i + '">' + c[i].CONTACT_NAME + '</span></td><td><span id="lblCpFirstName' + i + '">' + c[i].FIRST_NAME + '</span></td><td><span id="lblCpLastName' + i + '">' + c[i].LAST_NAME + '</span></td><td valign="top"><input type="submit" id="btnCpSelect' + i + '" value="' + $J("#hdnCpTransSelect").val() + '" title="' + $J("#hdnCpTransSelectContact").val() + '" /></td></tr>');

                                    $J("body").bind('click', { index: i, contactId: c[i].CONTACT_ID, contactName: c[i].CONTACT_NAME, firstName: c[i].FIRST_NAME, lastName: c[i].LAST_NAME }, function (event) {
                                        if ($J(event.target).is("#btnCpSelect" + event.data.index)) {
                                            SelectContact(event.data.contactId, event.data.contactName, event.data.firstName, event.data.lastName);
                                            return false;
                                        }
                                    });
                                    // Copy button css styling from an existing on page button by passing the IDs for both buttons to the CopyBtnStyle fn.
                                    CopyBtnStyle("btnCpSelect" + i, "btnCpClose");
                                }
                            }
                            else {
                                this.append('<tr><td><span id="lblCpNoRows">' + JObject.RESULT[0].FEEDBACK + '</span></td></tr>');
                            }
                        }
                    }
                    else {
                        TimeOut();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    WsFail(XMLHttpRequest, textStatus, errorThrown);
                }
            });
        }
    }
}

Answer 1

好吧...我已经了解了事情的真相。我不确定从技术上讲为什么这是一个问题，也许这里一位知识渊博的贡献者可以为我解释一下，但我必须单击这些动态按钮两次才能触发单击事件的问题是由以下事实引起的:我已连接“PickContacts”JS 函数，以便在表单中文本输入字段的 keyup 和模糊事件上调用。

虽然显然有点多余，但我只是不确定为什么这会是一个问题，因为在我调用 WS 方法来检索联系人列表之前，我确实清空了显示 WS 方法发回的结果的表。因此，我假设随着表格行及其元素从 DOM 中删除，绑定(bind)到按键上或模糊时的动态按钮(以先到者为准)的单击事件也会被删除。

我能肯定地说的是我可以观察到的，那就是，在我从文本输入字段中删除其中一个事件，将另一个事件留在原处后，我的问题是必须单击两次才能获得按钮的单击事件已解决。

如果有人在技术上知道为什么通过绑定(bind)这两个事件来调用这个构建列表的函数会产生问题，我很乐意在基础层面上更好地理解它。

无论如何，我再次感谢 PetersonDidIt 和 DarthJDG 给予的关注。