动态添加按钮（使用jQuery）必须被点击了两次火已经被绑定到按钮

Question

的单击事件我动态添加一个选择按钮，可以单击以从列表中选择一个给定的接触被附加到表。

我要在文档中的任意位置单击之前，我可以点击动态添加按钮。显然，动态按钮的绑定事件在第一次单击之后才会绑定。

顺便说一句，在当前版本的函数中，我将一个点击事件绑定到每个动态按钮的文档正文，然后查看事件目标是否是相关的动态按钮，此时我会触发所需的功能传回选定的联系人。我转而采用这种方法，给予他人经历我在这里描述的同样事情的建议。在实现之前，我有一个非常传统的$ J（“＃btnId”）。bind（'click'，{....}，function（event）{...}）;方法来绑定点击事件，这导致了在点击事件触发动态按钮之前必须点击两次的相同体验。我也从其他角度出发，使用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函数，以便在窗体中的按键和模糊事件中对文本输入字段进行调用。虽然显然有点多余，但我只是不确定为什么这会是一个问题，因为在我调用WS方法来检索联系人列表之前，我会清空WS方法发回的结果所在的表显示。所以，我会假设，随着表格行和它们的元素被从DOM中移除，那么在键上或模糊处（先出现者）已经绑定到动态按钮的单击事件也会如此。

我可以肯定地说的是我可以观察到的，也就是说，在我从文本输入字段中删除其中一个事件之后，将其他任何一个都移除了，我必须点击两次之前的问题获取按钮的点击事件触发已解决。

如果还有人在那里，知道为什么技术通过结合这两个事件中调用该函数建立名单将创建问题，我很想以更好地了解它的基本水平。

在任何情况下，我再次感谢双方PetersonDidIt和DarthJDG给予的注意。

Answer 2

有很多事情可以做，使这项工作更好。我修改了一些代码，并添加了很多的意见，试图解释为什么我所做的更改：http://jsbin.com/ipuki5/2/edit

或质量代码块：

// Create an easy to edit template for our row 
var contactsRowtmpl = '<tr class="%trStyle%"><td><span id="lblCpContactId%index%">%CONTACT_ID%</span></td>'+ 
    '<td><span id="lblCpContactName%index%">%CONTACT_NAME%</span></td>'+ 
    '<td><span id="lblCpFirstName%index%">%FIRST_NAME%</span></td>'+ 
    '<td><span id="lblCpLastName%index%">%LAST_NAME%</span></td>'+ 
    '<td valign="top"><input type="submit" id="btnCpSelect%index%" class="CpSelect" value="%value%" title="%title%" /></td></tr>'; 

// Very simple templating function 
function template(tmpl, data) { 
    return tmpl.replace(/%(\w*)%/g,function(){ return data[ arguments[1] ] || "";}); 
} 

// Cache the table selector 
var tblCpResults = $J("#tblCpResults"); 
// Use delegate to bind the click event to for all input.CpSelet 
tblCpResults.delegate("click", ".CpSelect", function (event) { 
    // prevent the default action of the click event 
    event.preventDefault(); 
    // retrive the data from the row 
    var data = $(this).closest("tr").data("contact"); 
    // Select the contact 
    SelectContact(data.contactId, data.contactName, data.firstName, data.lastName); 
}); 

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; 
     } 

     tblCpResults.empty(); 
     if (contactId !== "" || contactName !== "" || firstName !== "" || lastName !== "" || email !== "") { 
      $J.ajax({ 
       type: "POST", 
       url: "/ClientBin/Contact.asmx/ContactPicker", 
       // Use a normal object here much easier to maintain 
       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", 
       success: function (result) { 
        if (result.d === "TIME OUT") { 
         TimeOut(); 
         return; 
        } 
        var JObject = ParseJson(result.d), 
         // Cache these selectors so we don't have to reselect them in the for loop 
         hdnCpTransSelect = $J("#hdnCpTransSelect"), 
         hdnCpTransSelectContact = $J("#hdnCpTransSelectContact"); 
        if (JObject !== null) { 
         if (!JObject.RESULT[0].SUCCESS) { 
          tblCpResults.append('<tr><td><span id="lblCpNoRows">' + JObject.RESULT[0].FEEDBACK + '</span></td></tr>'); 
          return; 
         } 
         var c = JObject.CONTACT; 
         // Create an empty jQuery object to stuff all of the rows in 
         var rows = $(); 
         for (i = 0; i < c.length; i++) { 
          c[ i ].trStyle = (i % 2) ? "alternatingrowstyleNoBorder" : "rowstyleNoBorder"; 
          c[ i ].index = i; 
          c[ i ].value = hdnCpTransSelect.val(); 
          c[ i ].title = hdnCpTransSelectContact.val(); 

          // Use the template function to handle creating our row 
          var row = template(contactsRowtmpl, c[ i ]); 
          // Add the contacts data to the row so we can retrive it later 
          $.data(row, "contact", c[ i ]); 
          // add the row to the rows jQuery object 
          rows = rows.add(row); 
          // Why do you need to copy the btn style? seems like this could be improved on. 
          CopyBtnStyle("btnCpSelect" + i, "btnCpClose"); 
         } 
         // Now that we are done looping add all the rows to the dom. 
         tblCpResults.append(rows); 
        } 
       }, 
       error: function (XMLHttpRequest, textStatus, errorThrown) { 
        WsFail(XMLHttpRequest, textStatus, errorThrown); 
       } 
      }); 
     } 
    } 
}