Подтверждение диалога Jquery Modal - умножение новых окон

Question

Я пытаюсь избежать использования jquery-ui, simple-modal или любого плагина.

Функциональность, за которой я работаю, заключается в нажатии любой внешней ссылки, которая отображает скрытый элемент div, содержащий кнопки «да» и «нет». Если пользователь нажимает кнопку «Да», он переносится в новое окно.

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

<div id="overlay">
<div class="decoration">            
            <div class="overlay-content">
                <a href="#" class="close">X</a>
                <h1>You are now leaving the  website</h1>
                <p>This link will take you to a website where this Privacy Policy does not apply.</p>
                <p><strong>Select OK to continue.</strong></p>
                <a href="#" class="ok">OK</a>
                <a href="#" class="cancel">CANCEL</a>
            </div>
        </div>

$("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function (event) {

    var href_ext = $(this).attr("href");                             

    $('#overlay').fadeIn(500).css({'position':'fixed', 'top':'0px'});       

    $('#overlay .ok').live('click', function () {           
        window.open(href_ext);
        $('#overlay').hide();
        return false;
    });
    $('#overlay .close, #overlay .cancel').live('click', function () {                      
        $('#overlay').fadeOut(500);         
    });
    event.preventDefault();
});

Вот пример того, что происходит http://jsbin.com/apekik/7

Answer 1

Спасибо, Марк, что нашли время разобраться в этом и указали на повторяющуюся функцию. Ваше решение не работает должным образом, поскольку ссылка ссылается на текущую страницу, а не на внешнюю ссылку. Мне все еще нужно было связать все остальные функции с щелчком. Я не слишком сильно изменил свой код и решил его, добавив .die () перед .live (), что предотвращает повторение упомянутой вами функции.

$("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function (event) {
event.preventDefault();

    var href_ext = $(this).attr("href");                                 

    $('#overlay').fadeIn(500).css({'position':'fixed', 'top':'0px'});       

    $('#overlay .ok').die().live('click', function () {           
        window.open(href_ext);
        $('#overlay').hide();
        return false;
    });

    $('#overlay .close, #overlay .cancel').click(function () {                      
        $('#overlay').fadeOut(500);         
    });
});

Рабочий раствор: http://jsbin.com/apekik/14

Answer 2

При каждом нажатии на ссылку функция вызывается снова. Каждый раз, когда вызывается функция, live регистрирует еще один обратный вызов по всем ссылкам, поэтому, когда пользователь, наконец, нажмет «ОК», функция window.open будет вызываться повторно. Кроме того, fadeOut вызывается несколько раз, но эффекты просто скрыты, потому что, ну, он исчезает.

Итак, мы переместили код для .ok, .close и .cancel за пределы клика ссылки, и изменили live на click, и все должно быть в порядке.

$('#overlay .ok').click(function (event) {   
     var href_ext = $(this).attr("href");          
     window.open(href_ext);
     $('#overlay').hide();
     return false;
});

$('#overlay .close, #overlay .cancel').click(function () {                      
    $('#overlay').fadeOut(500);         
});

$("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").click(function (event) {
    $('#overlay').fadeIn(500).css({'position':'fixed', 'top':'0px'});       
    event.preventDefault();
});