jquery вызывает событие внутри другого связанного события

Question

У меня есть HTML, как показано ниже:

<div class="parent"> 
  <a href="#">parent</a>
  <div class="child">child</div>
</div>

Вот мой Jquery, связывающий событие click:

$(document).ready(function(){
    $('.parent').on('click', function(){
        alert('parent div');
    });

    $('.child').on('click', function(){
        alert('child div');
    });
});

Я хочу, если я нажму на ".child" div, то событие, связанное с "div.parent", не должно вызываться. Опять же, если я нажму на ".parent" div и его связанное событие должно быть выполнено.

Я попытался со следующим -

 $('.child').on('click', function(){
        alert('child div');
        $(this).parents('.parent').off('click');
        return false;
    });

Но приведенный выше код навсегда отменил событие "click" на parent div, и снова его событие щелчка не срабатывает.

javascript jquery

-1

Gautam Rai 28 Авг 2017 в 21:19

Answer 1

Почему бы вам не прекратить размножаться, чтобы предотвратить запутывание события от ребенка, чтобы достичь этого

$(document).ready(function(){
    $('.parent').on('click', function(){
        alert('parent div');
    });

    $('.child').on('click', function(ev){
        ev.stopPropagation();
        alert('child div');
    });
});

3

Koushik Chatterjee 28 Авг 2017 в 18:23

Answer 2

Да. Дирадж прав. используйте функцию topPropagation ()

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
    $('.parent').on('click', function(){
        alert('parent div');
        $('.child').click();
    });

    $('.child').on('click', function(e){
        e.stopPropagation()
        alert('child div');
    });
});

</script>

</head>
<body>

<div class="parent"> 
  <a href="#">parent</a>
  <div class="child">child</div>
</div>

</body>
</html>

0

volkinc 28 Авг 2017 в 18:29

Answer 3

После того, как вы щелкнете по дочернему элементу div, событие всплывет через дерево DOM, что вызывает срабатывание родительского элемента div, теперь, чтобы предотвратить это, вам нужно остановить распространение, используя event.stopPropagation(), подробнее об этом читайте здесь

 $('.child').on('click', function(event){
    event.stopPropagation();
    alert('child div');
    return false;
});

1

Kingsley Solomon 28 Авг 2017 в 18:31

Answer 4

Гаутама ,

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

makeParentReady = function() {
    $('.parent').on('click', function(){
    myClass=this.className;
    alert('parent div');

    });

}

$(document).ready(function(){
        makeParentReady();

        $('.child').on('click', function(){
            myClass=this.className;
            alert('child div');
            $(this).parents('.parent').off('click');
            makeParentReady();
            return false;
            });
        });

1

Derek Wilson 28 Авг 2017 в 19:23

jquery вызывает событие внутри другого связанного события

4 ответа

Похожие вопросы

Новые вопросы

javascript