Вложенный $ (документ) .ready () - PullRequest
Новая
       16

Вложенный $ (документ) .ready ()

0 голосов
/ 04 октября 2018

У меня есть простая веб-страница с одиночной кнопкой.

Используя jQuery 3.3.1 , к этой кнопке присоединяется событие «щелчка», так что после нажатия этой кнопки следующий клик в любом месте страницы (document) дает alert('Clicked!').

<div id="container">
    <button id="Btn">Click</button>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#Btn").click(function() {
            $(document).click(function() {
                alert("Clicked!");
                $(document).unbind('click');
            });
        });
    });
</script>

Но, используя этот код, первый щелчок по самой кнопке приводит к alert('Clicked!').

Я немного изменил код и прикрепил 'click'event to $(document) внутри вложенного $(document).ready(): 

<script type="text/javascript">
    $(document).ready(function() {
        $("#Btn").click(function() {
            $(document).ready(function() {   // <--here
                $(document).click(function() {
                    alert("Clicked!");
                    $(document).unbind('click');
                });
            });
        });
    });
</script>

Это работает, как задумано, но я все еще не могу вывести такое поведение: зачем мне включать вложенное$(document).ready()?

Или есть какой-то другой подход для достижения желаемой функциональности?

1 Ответ

0 голосов
/ 04 октября 2018

Причиной того, что ваш первый фрагмент генерирует предупреждение при первом нажатии кнопки, является распространение события, в частности событие всплывающее сообщение .Когда вы нажимаете кнопку, после того, как обработчик события выполнен, то же самое событие распространяется вверх по дереву DOM;в конечном итоге он достигает элемента документа и запускает новый обработчик событий, на который вы подписаны.

Один из подходов, обеспечивающих немедленное срабатывание события в документе, заключается в предотвращении распространения события путемзвонить event.stopPropagation().

Вы можете увидеть это в действии во фрагменте ниже: 

$(document).ready(function() {
  $("#Btn").click(function(e) {
    e.stopPropagation();
  
    $(document).click(function() {
      alert("Clicked!");
      $(document).unbind('click');
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="Btn">Click</button>
</div>
...