Question

我为系统中的不同成员创建了一个follow / unfollw按钮。我的问题是，在按钮所在的同一div中再次呈现html后，jQuery事件没有被触发。 follow / unfollow按钮第一次工作 - 总是，但从不第二次尝试。其他依赖于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() { /*...*/});

挂钩click元素上的#start-members事件，但是如果事件通过与我们作为第二个参数的选择器匹配的元素传递，则告诉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 });

为什么事件不会被解雇一次？

2 个答案: