Назначение обработчика click-event внутри события click

Question

Я столкнулся с каким-то странным поведением при работе с событиями click в jQuery.

Посмотрите this Fiddle

$('#button').click(function() { 
    $(document).one('click', function() { 
     alert('clicked'); 
    }); 
}); 

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

Но при нажатии этой кнопки «щелчок» сразу же получает предупреждение без другого нажатия. Таким образом, очевидно, что событие click, которое связывает новый обработчик с документом, получает пузырь в документ и сразу же запускает только что назначенный hndler.

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

$('#button').click(function() { 
    // Show some element 

    $(document).one('click', function() { 
     // Hide the element again 
    }); 
}); 

Но это приводит к тому, что элемент скрывается немедленно.

У кого-нибудь есть решение этой проблемы?

Answer 1

Мероприятие может быть предотвращено размножением DOM.

$('#button').click(function(e) { 
    e.stopPropagation(); 
    $(document).one('click', function(e) { 
     alert('clicked'); 
    }); 
}); 

JS Fiddle:http://jsfiddle.net/7ymJX/6/

Answer 2

Остановить это будет пузырь с stopPropagation :)

редактируемой скрипкой с элементом укрытий включены.

http://jsfiddle.net/AdamMartin121/7ymJX/12/

Answer 3

Пожалуйста, вы можете проверить этот код Demo

HTML код

<button id="button">Click me!</button> 
<div id="new_div"></div> 

Jquery

$('#button').click(function(e) { 
    e.stopPropagation(); 
    $('#new_div').css('display', 'block'); 
    $('document, html').click(function() { 
     alert('clicked'); 
     $('#new_div').css('display', 'none');  
    }); 
}); 

Css

#new_div { 
    height: 100px; 
    width: 200px; 
    border:1px solid black; 
    display : none; 
}