为什么不触发事件不止一次？

Question

我正在为系统中的不同成员创建关注/取消关注按钮。在按钮所在的同一个 div 中再次呈现 html 后，我遇到了 jQuery 事件没有被触发的问题。关注/取消关注按钮第一次工作 - 总是，但永远不会第二次尝试。其他依赖于javascript的东西仍然有效，所以它也不是js中的错误。

//html snippet
<div id="start-members">
<div class="content">
    <div class="result">
        <div class="items-column member"><div class="image-holder">
        <img src="imagefile"></div>
        <span class="button-section">
        <a href="#" data-userid="61" class="follow button trans-effect follow-user"><span class="following-text">Follow</span><span class="unfollow-text">Unfollow</span></a>
        </span>
        <div class="clearfix"></div></div>

        <div class="items-column member"><div class="image-holder">
        <img src="imagefile"></div>
        <span class="button-section">
        <a href="#" data-userid="95" class="follow button trans-effect follow-user"><span class="following-text">Follow</span><span class="unfollow-text">Unfollow</span></a>
        </span>
        <div class="clearfix"></div></div>

        <div class="items-column member"><div class="image-holder">
        <img src="imagefile"></div>
        <span class="button-section">
        <a href="#" data-userid="104" class="follow button trans-effect follow-user"><span class="following-text">Follow</span><span class="unfollow-text">Unfollow</span></a>
        </span>
        <div class="clearfix"></div></div>

    </div>
</div>
</div>

//jQuery
//This returns html and put it into result-div above
function getLatestMembers() {
    var getLatest = $.ajax({
        type: 'GET',
        url: '/index.php/members/getlatest',
        dataType: 'json'
    });

    //If success, returning html
    getLatest.done(function(data) {
        $("#start-members .result").html(data);                
    });                        

    getLatest.fail(function(ts) {
        alert(ts.responseText);
    });            
}

//Toggle between following this user or not
$(".content .button-section").on('click', '.button.follow-user', function(e) {   
    e.preventDefault();
    //doing toggle of the button (to unfollow-user/follow-user)
    getLatestMembers(); //When having this call it renders the div latest members and next time this event is not fired. why?
});

//Unfollow user that has created this outfit
$(".content .button-section").on('click', '.button.unfollow-user', function(e) {   
    e.preventDefault();
    //doing toggle of the button (to unfollow-user/follow-user)
    getLatestMembers(); //When having this call it renders the div latest members and next time this event is not fired. why?
});

我也试过在事件调用中只使用getLatestMembers()。下次不触发该事件。

//Unfollow user that has created this outfit - fired only once
$(".content .button-section").on('click', '.button.unfollow-user', function(e) {   
    e.preventDefault();
    getLatestMembers();
});

我希望我已经描述了这个场景，以便你们理解我的问题/问题:-)（问题是：为什么事件没有触发一次以上？）

Answer 1

因为当您更新该部分时，您会破坏已挂钩事件的元素，并且不会将事件挂钩到替换它们的新元素上。

这段代码：

$(".content .button-section").on('click', function() { /*...*/});

找到在那个时刻存在的元素并将处理程序连接到它们。但是这段代码：

$("#start-members .result").html(data);

销毁这些元素并用新元素替换它们。

改用事件委托：

$("#start-members").on("click", ".content .button-section", function() { /*...*/});

这会在#start-members 元素上挂钩click 事件，但告诉jQuery 仅在事件穿过与我们作为第二个参数提供的选择器匹配的元素时才触发您的处理程序。由于您不销毁并重新创建 #start-members，因此处理程序保持在原地。

Answer 2

哈哈。仅仅因为我发布了这个问题，我就明白了。万一其他人有类似的问题...

我变了：

$(".content .button-section").on('click', '.button.unfollow-user', function(e) {   
    e.preventDefault();
    //doing toggle of the button (to unfollow-user/follow-user)
    getLatestMembers(); //When having this call it renders the div latest members and next time this event is not fired. why?
});

到

$(".content").on('click', '.button-section .button.unfollow-user', function(e) {   
    e.preventDefault();
    //doing toggle of the button (to unfollow-user/follow-user)
    getLatestMembers(); //fired each time now
});