javascript - 单击第二个按钮后，jQuery on click 开始正常工作

Question

( fiddle :http://jsfiddle.net/qdP3j/)

我有这个 div:

<div id="addContactList"></div>

我使用 AJAX 并将其 innerHTML 更改为类似以下内容:

  <div id="<%= data[i].id %>">
    <img src="<%= picture %>">
    <button class="addAsFriend">Add as Friend</button>
  </div>

在我的 JS 中，我有

$('#addContactList').on('click', '.addAsFriend', function () {
  $(this).text('Request sent!');
  $(this).attr('disabled','disabled');
});

发生的事情是，当我第一次点击一个按钮时，我看到点击功能运行了； “请求已发送!”正在显示，但它会立即恢复到初始按钮。当我第二次点击时，它工作正常。

我尝试使用 event.stopPropagation 和 preventDefault 但同样的问题发生了。

如前所述，它可能来自 AJAX 部分:

基本上，我在一个页面上有 3 个输入字段，用户可以在其中输入数据。如果字段中有数据，它们将被发布，我使用这些数据来查询数据库。有250ms的延时功能，防止每打一个字母就立马发帖。

var addContactsList = document.getElementById('addContactList');

$('#addContactForm').on('keyup change', function () {
  var self = this;

  // Add a short delay to not post for every letter typed quickly
  delay(function() {
    var userSearchData = {};
    userSearchData.userId = 23;

    $.each(['email', 'username', 'fullName'], function (_, el) {
      var val = $(self).find('input[name="' + el + '"]').val();
      if (val.length >= 3) {
        userSearchData[el] = val;
      }
    });

    if ( !isEmpty(userSearchData) ) {
      $.post('/post/addContact', { userSearchData: userSearchData }, function (data) {
        if (data) {
          new EJS({url: '/templates/addAContact.ejs'}).update('addContactList', { data: data })
        } else {
          addContactsList.innerHTML = '';
        }
      });
    } else {
      addContactsList.innerHTML = '';
    }
  }, 225 );

});

Answer 1

这是因为“键盘更改”。 Change 在点击别处(添加好友按钮)时被再次触发。

现在虽然问题是当人们使用鼠标使用自动完成功能时，它不会触发，因为更改不再存在。