Блог

Главная - Вопросы по программированию - Удаление всех всплывающих окон, затем добавление всплывающего окна, не отображается

Удаление всех всплывающих окон, затем добавление всплывающего окна, не отображается

#jquery #twitter-bootstrap #popover

#jquery #twitter-bootstrap #всплывающее окно

Вопрос:

Я хочу, чтобы одновременно открывался только один всплывающий окно. Поэтому я удаляю их все, а затем добавляю новый, но это не работает.

 $(document).on("click", ".priority", function() {
    $(".popover").remove();
    $(this).popover({ /* [...] */ });
});

Это не показывает ничего подобного, если бы оно было удалено после создания.

JSFiddle

Комментарии:

1. Я делаю это, потому что мне нужно знать, какова цель всплывающего окна. Итак, вместо того, чтобы сохранять массив для целей всплывающих окон, я предпочитаю сохранить его.

2. Как я бы ответил на ваш последний вопрос, я думаю, вы делаете это немного задом наперед. Нет необходимости сохранять цель или триггер, поскольку он уже был у вас в $(this).

Ответ №1:

Вам нужно использовать метод hide , например popover('hide') :

 $(document).on("click", ".priority", function() {
    //this will hide all popovers except the popover associated to the clicked .priorioty
    $(".popover").not(this).popover('hide');
    $(this).popover({ /* [...] */ });
});

см. документацию http://getbootstrap.com/javascript/#popovers

Вот небольшая демонстрация, показывающая, как я бы это сделал (отличается от вашего, кстати, также последний (удаленный) вопрос относительно «заостренного»). Не совсем понимаю, чего вы пытаетесь достичь (особенно думая о последнем вопросе) — почему вы создаете всплывающие окна по щелчку мыши, поэтому пользователю приходится нажимать дважды? Кстати, ваша скрипка никогда не показывает всплывающее окно!

 $('.priority').each(function() {
    $(this).popover({
        title: "Priority value",
        content: '<input id="priorityBox" type="range" min="0" max="100" />',
        container: "#matchRuleForm",
        html: true
    }).on('show.bs.popover', function() {
       $('.priority').not(this).popover('hide');
    });  
})

Всплывающее окно привязано к элементу, например .priority , — поэтому вы должны настроить таргетинг на эти элементы. .popover просто вводится в DOM временно, и им нельзя манипулировать с помощью методов popover, таких как .('show') и .('hide') .

демо -версия -> http://jsfiddle.net/4mWE9 / (теперь правильная ссылка)

Комментарии:

1. «ваша скрипка никогда не показывает всплывающее окно» Вот почему я спрашиваю, почему оно не отображается. «почему вы создаете экземпляры всплывающих окон по щелчку, поэтому пользователь должен щелкнуть дважды?» Вы правы, я, вероятно, неправильно это реализовал. И я не знаю, как вы нашли этот удаленный вопрос. ^^ /! : Я думаю, ваш jsfiddle неверен, он такой же, как тот, который я отправил, что не является рабочим случаем. Вы забыли сохранить?

2. @Elfayer, да, но почему вы создаете экземпляр всплывающего окна в событии щелчка, тогда основная идея всплывающих окон — автоматизировать именно это поведение? Выше приведен «способ начальной загрузки» для этого.

3. Ваша реализация не работает, если элемент with .priority создается динамически. Опять же, ваша ссылка на jsfiddle совпадает с той, которую я опубликовал в своем вопросе, и не показывает решения.

4. @Elfayer: Упс, вставил неправильный jsfiddle, позор мне — теперь это исправлено! Здесь -> jsfiddle.net/4mWE9 и в приведенном выше ответе.

5. Хорошо, неплохо. Я думаю, вы ответили на вопрос, даже если это не полностью решит мою проблему, я создам новый поток.

Метки: , ,