javascript - 更改 id 后 jQuery onClick 函数不起作用

Question

我在 Laravel 中使用 AJAX 创建关注按钮。当我点击关注时，它会随着id的变化而变成取消关注。我尝试再次点击取消关注按钮，并没有执行点击取消关注功能，而是保持之前的点击关注功能。

HTML

 <a id="followAnchor" type="submit" class="btn btn-info" /><i class="fa icon-user-follow"></i> Follow</a>
                                                                     </div>

AJAX

$('#followAnchor').on("click", function(e){
var followId = document.getElementById('followAnchor');
 $.ajax({
          url: "{{ URL::route('follow-post') }}",
          type: 'POST',
          data: JSON.stringify(arr),
          contentType: 'application/json; charset=utf-8',
          dataType: 'json',
    }).done(function(response) {

          if(response.errors)
          {

          }
          else if (response.success){


            followId.innerHTML = "<i class='fa icon-user-follow'></i>" + "Unfollow";
            document.getElementById('followAnchor').id = 'unfollowAnchor';
          }
    });
}

$('#unfollowAnchor').on("click", function(e){
    var unfollowId = document.getElementById('unfollowAnchor');

    $.ajax({
          url: "{{ URL::route('unfollow-post') }}",
          type: 'POST',
          data: JSON.stringify(arr),
          contentType: 'application/json; charset=utf-8',
          dataType: 'json',
    }).done(function(response) {

          if(response.errors)
          {

          }
          else if (response.success){
            unfollowId.innerHTML = "<i class='fa icon-user-follow'></i>" + "Follow";
            document.getElementById('unfollowAnchor').id = 'followAnchor';
          }
    });
});

Answer 1

事件在改变后不会神奇地绑定(bind)。一旦代码运行，它就不会继续检查新元素。

• 您需要在更改 id 或添加新元素时取消绑定(bind)/绑定(bind)事件。
• 不要更改 ID，只需将逻辑添加到原始点击(大多数开发人员所做的)
• 或者使用事件冒泡。

冒泡示例:

$(document).on("click", "#followAnchor", function(e){ /* code here */ });        
$(document).on("click", "#unfollowAnchor", function(e){ /* code here */ });