Temporary disable jQuery event

Question

I have something like this and it has been created from jQuery .append(html)

 <div class="pPost">
<p>id</p>
<div class="pPostIn">
    <div class="link">
        <a href="http://www.google.com"></a>
    </div>
    <div class="id"></div>
    <div class="txt"></div>
</div>

Then a jQuery function like this:

EDIT: 3

$(function () {
$(".link").live({
    mouseenter: function () {
        $(this).css("background-position", "0 0"); //this works
        $(".pPost").die();
    },
    mouseleave: function () {
        $(this).css("background-position", ""); //this works
        $(".pPost").live("click", ajaxCall);
    }
});
return false;
});

And this works as expected, but the problem I am trying to solve is how to make that .link anchor executable as the .pPost live function "took 1st place"? I tried to .unbind()/.undelegate() .pPost but I was unsuccessful:

EDIT: 3

var ajaxLoad = function () {
    $(".pPost").live("click", function () {

        $.ajax({
            type: "POST",
            url: "rucno/php/archive_page_helper.php",
            data: idData,
            cache: false,

            success: function (html) {                    
                $(pPost).append(html).hide().slideDown(400, function () {
                    $(".link").hide().delay(1000).fadeIn(1000);
                });
            }
        });            
    });
  return false;
};

EDITED once again, but still the same, it wont work :)

score 0 · Answer 1 · edited May 23 '17 at 12:26

0

When you use live to bind an event, use die to unbind it.
You can't rebind an event just by saying .bind() again.

See this question to temporalily unbind an event: jquery temporary unbinding events

EDIT

var ajaxLoad = function () {
  $.ajax({
    //blablabla
  });
  return false;
};

EDIT Rebind ajax loading.

// Rebind like this
$(".pPost").live("click", ajaxLoad);

EDIT As links are inside .pPost, when it's reloaded, links loose their bind and should also be rebinded.

// Rebind links
$('a').click(fn);
$('.pPost').load('blabla.html',function() {
    $('.pPost a').click(fn);
});

EDIT Be careful with embeded ajax calls:

var ajaxLoad = function () {
    $.ajax({
        type: "POST",
        url: "blabla.php",
        data: idData,
        cache: false,

        success: function (html) {

            $(pPost).append(html).hide().slideDown(400, function () {
                $(".link").hide().delay(1000).fadeIn(1000);
            });
        }
    });
};

And then:

$(".pPost").live("click", ajaxCall);

edited May 23 '17 at 12:26

Community

1
1

answered Feb 09 '12 at 13:39

sinsedrix

4,336
4
29
53

die works dut redbind do not :) ... I added code to the first post – InTry Feb 09 '12 at 13:44
No rebind doesn't work, really go to http://stackoverflow.com/questions/3408082/jquery-temporary-unbinding-events and read the best answer ! Does your ajax call need to run several times, if not bind `.pPost` with `.once()`. – sinsedrix Feb 09 '12 at 13:54
yep it has to run again after mouse leave the .link area – InTry Feb 09 '12 at 14:01
Sorry, maybe you should make a [fiddle](http://jsfiddle.net/) then we could see what's going wrong. – sinsedrix Feb 09 '12 at 16:07
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/7501/discussion-between-intry-and-sinsedrix) – InTry Feb 09 '12 at 16:37

score 0 · Accepted Answer · edited May 23 '17 at 10:34

solved as "RamboNo5" suggest in post jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

I had just to modify it, this is how it's works

html

 <div class="pPost">
<p>id</p>
<div class="pPostIn">
    <div class="link">
        <a href="http://www.google.com"></a>
    </div>
    <div class="id"></div>
    <div class="txt"></div>
</div>

js

$(function () {
var active= true;
$(function () {
    $(".link").live({
        mouseenter: function () {               
            active= false;                
        },
        mouseleave: function () {                
            active= true;              
        }
    });
    //return false;
});


$(function () {

    $(".pPost").live("click", function () {

        if (!active) {
            return;
        }

        $.ajax({
            type: "POST",
            url: "rucno/php/archive_page_helper.php",
            data: idData,
            cache: false,

            success: function (html) {                           
                $(pPost).append(html).hide().slideDown(400, function () {
                    $(".link").hide().delay(1000).fadeIn(1000);                        

                });

            }
        });

        return false;
    });
});
});

Temporary disable jQuery event

2 Answers2