退出后，用JavaScript修改文本不会保留在弹出窗口中

Text Change with JavaScript isn't retained in popover after exiting

本文关键字：保留 窗口 JavaScript 文本 修改 退出      更新时间：2023-09-26

我有一个弹出窗口，激活每个链接到一个用户包含的功能，以遵循/取消遵循。

  • 悬停在链接上显示弹出窗口
  • 弹出窗口显示:"Follow"
  • 点击Follow发送Ajax请求
  • Ajax成功响应并将文本更改为Unfollow
  • 激活弹出窗口，然后将鼠标悬停在相同的链接上，它会恢复到跟随。

…

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

$(document).on('click', '.follow-user .follow, .follow-user .unfollow', 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">
    {% if user in loggedInUser.followingUsersOnly %}
        <a class="unfollow" data-uid="{{ user.id }}">Unfollow</a>
    {% else %}
        <a class="follow" data-uid="{{ user.id }}">Follow</a>
    {% endif %}
</span> 
<div style="clear:both"></div> <br />'>
        {{ user.username }}
    </a>

我可能在这一点上是错误的，但是你可能不得不销毁弹出窗口并重新创建它与成功回调中的内容。

我发现弹出窗口只在DOM内，当它显示，并删除时，它不是。(这是阻止你改变你的文本)。

$('body').popover('destroy');
var options = {
    html: true,
    selector: '[data-popover]',
    trigger: 'click hover',
    placement: 'right',
    delay: {show: 50, hide: 400},
    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">
        {% if user in loggedInUser.followingUsersOnly %}
            <a class="unfollow" data-uid="{{ user.id }}">Unfollow</a>
        {% else %}
            <a class="follow" data-uid="{{ user.id }}">Follow</a>
        {% endif %}
        </span> 
        <div style="clear:both"></div> <br />'
};
$('body').popover(options);
//This is not needed, but it shows the popover
$('body').popover("show");

我不太确定如何弹出窗口工作与angularjs/django所以插值值可能会搞砸。

相关文章：