当另一个元素被点击时如何防止div.click事件

Question

I want to prevent click event but e.stopPropagation() doesn't work.

I'm trying to write something like Jtable . I use div as pagination buttons(1) and another element is delete button.

I need to disable pagination buttons when delete confirmation box is popping up . After click del or cancel "I want my pagination buttons work again". Is there any solution?

function deleteit() {
  $(".del").click(function() {
    $(".divbutton").click(function(e) {
    alert(1);   
    e.stopPropagation(); 
  });
}

$(".deletebtn").click(function() {
  deleteit();
});

$(".divbutton").click(function() { // I want to prevent this from click
  //ajax send and display data
});

I know that I should use input disabled instead of div, but I need to use div. edit:add image to make it understandable.

Answer 1

Instead of preventing the click handler... remove the registered handler using .off() , here namespaced event name is used because we want to remove only a very specific handler

function deleteit() {
    $(".del").click(function () {
        $(".divbutton").off('click.delete')
    })
}

$(".deletebtn").click(function () {
    deleteit();
});

$(".divbutton").on('click.delete', function () { // I want to prevent this from click
    //ajax send and display data
});

Why your code is not working? because stopping propagation will prevent the bubbling up of the event but in your case both the event are registered to the divbutton so both of them will get triggered even if propagation is prevented.

Another way is to use stopImmediatePropagation() even that is not possible here because your delete registers the handler later and it will get executed only after the first one is called