Question

我有这个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');
});

当我第一次点击按钮时，我看到点击功能已经运行; ＆＃34;发送请求！＆＃34;正在显示但它立即恢复到初始按钮。当我第二次点击时，它可以正常工作。

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

如上所述，它可能来自AJAX部分：

基本上，我在页面上有3个输入字段，用户可以在其中输入数据。如果字段中有数据，则会发布它们，并使用数据查询数据库。有一个250毫秒的延迟功能，以防止每次输入一个字母时立即发布。

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

这是因为＆＃34;密钥更改＆＃34;。点击其他地方时再次触发Change（添加好友按钮）。

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

Answer 2

正如您所注意到的，当您的输入字段失去焦点时（当您单击按钮时），会触发更改事件。您可以保留更改事件，并在输入字段为焦点时检查更改事件是否正在触发

$('#addContactForm').on('keyup change', function () {
        if (!$(document.activeElement).is('input')) return; //add this line

点击第二个按钮后，点击jQuery开始正常工作

2 个答案: