javascript - 如何让 JavaScript 在 Bootstrap 弹出窗口内执行？

Question

我有一个弹出窗口，用于指向用户的每个链接，其中包含他们的头像和关注/取消关注的选项。关注/取消关注功能有效，但在弹出窗口中不起作用？

$('body').popover({ selector: '[data-popover]', trigger: 'click hover', placement: 'top', delay: {show: 50, hide: 400}});

$('.follow-user .follow, .follow-user .unfollow').on('click', function(){
    var el = $(this);

    var actionType = el.hasClass('unfollow') ? 'unfollow' : 'follow';

    var data = {
        actionType: actionType,
        userId: el.attr("data-uid")
    };

    $.ajax({
        type: 'POST',
        url: '{{path('ajax_follow_user')}}',
        data: data,
        dataType: 'json',
        error: function(){
            alert('Error. please try again later!');
            el.removeClass('following');
        },
        beforeSend: function(){
            el.addClass('following');
        },
        success: function(r){
            alert("success");
            if(r.error != '') {
                alert(r.error);
                return false;
            }
            alert(actionType);
            if (actionType == 'follow')
            {
                el.text("Unfollow");
                el.stop().removeClass('follow').addClass('unfollow');
            }
            else if (actionType == 'unfollow')
            {
                el.text("Follow");
                el.stop().removeClass('unfollow').addClass('follow');
            }

            el.removeClass('following').text(r.label);
        }
    });
});

.

<a href="#"
       data-popover="true"
       data-html="true"
       data-content='
<img src="{{ asset(user.avatar) }}" alt="{{ user.username }}"
     width="80" height="80" style="float:left; margin: 0 10px 10px 0"/> 
<strong>{{ user.username }}</strong> <br />
<span class="follow-user"><a class="follow" data-uid="{{ user.id }}">Follow</a></span> 
<div style="clear:both"></div> <br />'>
        {{ user.username }}
    </a>

Answer 1

这些元素是由 bootstrap 的 popover 组件动态创建的，您无法预先为其分配监听器。

但是，事件冒泡允许您将监听器附加到表单中的父元素(或其父元素，直到文档)

$(document).on('click', '.follow-user .follow, .follow-user .unfollow', function(){
    var el = $(this);
    ...
});

这就是事件委托(delegate)。