Остановить событие, всплывающее с .on в Jquery

Question

Я обнажил следующее до гола, я передаю больше атрибутов, чтобы вызвать специфическую информацию в моем ajax.

$(document).on("click", ".call", function(){
    $.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:function(result){
        $("#LoadArea").html(result);
}});
});


$(document).on("click", ".cbcall", function(){
    $.ajax({type: "POST",url: "select.asp",dataType:"html",data: {},cache: false,success:function(result){
        $("#LoadArea").html(result);
}});
});

Выше приведен пример Jquery, который я использую, а ниже - HTML, который я использую.

<p class="call">click here to load</p>
<div id="LoadArea"></div>

Когда нажата кнопка , чтобы загрузить , содержимое страницы showform.asp загружается в элемент LoadArea. Содержимое showform.asp выглядит следующим образом

<div class="call">
    <input type="checkbox" class="cbcall">
</div>

Проблема в том, что если я нажму на флажок (.cbcall), событие всплывет, и загрузится showform.asp. Я довольно новичок в Jquery, поэтому я хотел бы знать, как остановить всплывающее окно событий, но все еще иметь возможность установить и снять флажок, который загружен в showform.asp.

Я пытался вернуть false; но это не будет проверять флажок.

Кто-нибудь может указать мне правильное направление?

ОБНОВЛЕНИЕ - Подправлен код, соответствующий предложению

Я обновил мою стартовую страницу в соответствии с кодом Никола (спасибо Никола)

$(document).ready(function(){
$(".call").on("click", function(e){
        //check that event is originated by a <p class="call"> element
        if($(e.target).is('.call')){
        alert('.call actioned');
        $.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:function(result){$("#LoadArea").html(result);}});
        }
});


$( ".call").on("click", ".cbcall",  function(e){
        alert('radio actioned');
    //Stop immediate propagation
        e.stopImmediatePropagation();
        $.ajax({type: "POST",url: "select.asp",dataType:"html",data: {},cache: false,success:function(result){$("#LoadArea").html(result);}});
});
});

<p class="call">click here to load</p>
<div id="LoadArea"></div>
<!-- additonal code below here -->
<div class="call">
    <input type="checkbox" class="cbcall">
</div>

Кроме того, я добавил содержимое showform.asp внизу страницы и добавил несколько предупреждений в Jquery.

Когда я нажимаю на <p class="call">click here to load</p> или <input type="checkbox" class="cbcall"> на начальных функциях страницы, срабатывает оповещение и загружается ajax, но когда я использую только <p class="call">click here to load</p> и пробую те же вызовы из загруженной ajax showform .asp страница ничего не происходит.

Answer 1

Проблема в том, что вы захватываете событие на уровне документа, и оно уже всплыло!

РЕДАКТИРОВАТЬ - Поскольку второй элемент добавляется динамически, вы должны сделать

$(".call").on("click", function(e){
    //check that event is originated by a <p class="call"> element
    if($(e.target).is('p.call')){
      $.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:function(result){
        $("#LoadArea").html(result);
      }});
     }
});


$( ".call").on("click", ".cbcall",  function(e){
     //Stop immediate propagation
     e.stopImmediatePropagation();
    $.ajax({type: "POST",url: "select.asp",dataType:"html",data: {},cache: false,success:function(result){
        $("#LoadArea").html(result);
}});

Answer 2

Поскольку вы связали событие с document, вы не можете предотвратить предотвращение всплытия клика обратно в документ (он уже всплыл там до того, как сработает обработчик события, в противном случае событие -обработчик не будет запускаться).

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

Answer 3

У меня была похожая проблема в следующем коде:

$(window).on('load resize', function() {
    $('a.ajaxlink').on('click tap', function(e) {
    // function
    }
}

Чтобы предотвратить всплывающее событие клика по клику после изменения размера окна, я просто добавил off () перед включением ('click tap'):

$(window).on('load resize', function() {
    $('a.ajaxlink').off().on('click tap', function(e) {
    // function
    }
}