Как я могу заставить JavaScript выполняться внутри всплывающего окна начальной загрузки?

#javascript #php #html #twitter-bootstrap-3

#javascript #php #HTML #twitter-bootstrap-3

Вопрос:

У меня есть всплывающее окно для каждой ссылки на пользователя, содержащее его аватар и возможность подписаться / отменить подписку. Функциональность follow / unfollow работает, но не во всплывающем окне?

 $('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>

1. Можете ли вы показать нам, где вы определяете прослушиватель для действия follow и unfollow? Возможно, это просто проблема с делегированием.

2. @amenadiel в теге Head под всплывающим js.

Ответ №1:

Элементы создаются динамически компонентом всплывающего окна начальной загрузки, и вы не можете назначить им прослушивателей заранее.

Однако обработка событий позволяет присоединить прослушиватель к родительскому элементу (или его родителю, вплоть до документа) в форме

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

это делегирование события.

1. Да, но вы присоединяете его к классам .follow и .unfollow . Я прикрепляю его к документу и использую второй параметр .on метода для выбора реальных целей.

2. Хорошо, я попробую это. Куда мне поместить закрывающую скобку для .on(?

3. просто замените первую строку. Я только что изменил первый селектор и добавил параметр к методу. Остальная часть вашей функции остается нетронутой.

4. Это работает, но знаете ли вы, почему текст возвращается обратно к Follow? Я навожу курсор на ссылку, и появляется всплывающее окно с надписью «Следовать», я нажимаю «Следовать», и JavaScript успешно выполняется, изменяя текст на «Отменить подписку», но если я выхожу и повторно ввожу всплывающее окно, оно возвращается к «Следовать».

5. Всплывающее окно уничтожается при наведении курсора мыши, а новое создается при повторном входе. Если вам нужно сохранить статус, вам нужно сохранить его как свойство данных контейнера <a> и искать событие для обнаружения открытия всплывающего окна, чтобы установить правильный статус.