Question

我在Laravel中使用AJAX创建了关注按钮。当我点击跟随时，它会随着id的变化而变成unfollow。我试图再次单击取消关注按钮，它没有在点击功能上执行取消关注，但保留了之前的点击功能。

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

事件在变更后不会神奇地受到约束。代码运行后，它不会继续检查新元素。

当您更改id /添加新元素时，您需要取消绑定/绑定事件。
不要更改id，只需在原始点击中添加逻辑（大多数开发者都会这样做）
或使用事件冒泡。

冒泡的例子：

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

Answer 2

您需要使用event-delegation，因为您在当时不存在的元素上注册了事件列表器。

$('#unfollowAnchor').on("click", function(e){

必须是

$(document).on("click", '#unfollowAnchor',function(e){

我不会在这里使用ID，而是添加或删除特定类：

$(followId).addClass('unfollow').removeClass('follow');

作为一个例子。

更改id后，jQuery onClick函数无效

2 个答案: