CODEWITHSUNDEEP
jqueryunbind
mf27
mf27

Reputation: 39

Jquery unbinding doesn't work

First of all - I have seen many questions on Stackoverflow related to unbinding using jQuery, but I didn't find an answer that would solve my specific situation. It's possible that I've missed something - feel free to direct me to the relevant question / answer already posted - thanks!

I have problems with realizing why event/handler unbinding doesn't work.

I'm using Wordpress 4.4 (although I guess Wordpress is irrelevant here), Firefox 42, jQuery 1.11.3.

The relevant parts of my .html and .js files - here's the html part:

<div class="py2web-diag-row1-col2">
<ul class="tabs">
    <li> <a class="sol-show" target="<?php echo($id); ?>">Show solution</a> </li>
    <li><a class="sol-hide" target="<?php echo($id); ?>" disabled>Hide solution</a></li>
</ul>
</div>

The relevant part from scripts.js file:

jQuery(".sol-hide").click(function() {

    // Get id of the corresponding problem solution
    id = this.attributes["target"].value;

    // Show (unhide) solution div element with target attribute of the current problem
    sel = '.p2w-solution[target="' + id + '"]';
    jQuery(sel).css("visibility", "hidden");

    // Deactivate hide-sol and activate show-sol
    sel = '.sol-hide[target="' + id + '"]';
    jQuery(sel).attr("disabled", false);
    this.setAttribute("disabled", true);

    // Activate py2web-s internal events (show moves when clicking on board)
    sel = '.p2w-diagram[id="' + id + '"] .p2w-nav-fwd';
    //jQuery(sel).off("click");
    jQuery(sel).unbind("click");
    sel = '.p2w-diagram[id="' + id + '"] .p2w-nav-bwd';
    //jQuery(sel).off("click");
    jQuery(sel).unbind("click");
});

Click event handlers on .p2w-nav-fwd(bwd) elements are defined in another js file, as follows:

jQuery(".p2w-nav-fwd").bind("click", Py2Web.navigateForward);
jQuery(".p2w-nav-bwd").bind("click", Py2Web.navigateBackward);

and little below, in Py2Web definition:

navigateForward: function(L) {
        L.preventDefault();
        C(jQuery('.p2w-solution[target="' + jQuery(this).parent().attr("id") + '"]').children(".active").nextAll("a").first())
    },
navigateBackward: function(L) {
        L.preventDefault();
        C(jQuery('.p2w-solution[target="' + jQuery(this).parent().attr("id") + '"]').children(".active").prevAll("a").first())
    }

So, by clicking onto the ".sol-show", i.e. ".sol-hide", anchor, the "click" event handler for .p2w-nav-fwd and .p2w-nav-bwd elements should be enabled (bind), i.e. disabled (unbind). However, unbinding simply doesn't work.

I hope I have provided all the relevant information, please ask for additional if needed.

Any help is appreciated.

Upvotes: 1

Views: 1239

Answers (2)

mf27
mf27

Reputation: 39

I solved the problem: in Wordpress, I'm loading my local version of jQuery, not Wordpress' default - but default was loaded after local - now I've changed the order of loading, so all my scripts are loaded only after jQuery - and it works fine... I should have realized that earlier. Thanks for help and sorry for your time.

Upvotes: 1

Javis Perez
Javis Perez

Reputation: 4350

Are you sure the selector is working and finding the element? 

sel = '.p2w-solution[target="' + id + '"]';

Also, instead of click and bind i would use "On" and "Off" methods because i've had problems before with "click" and "unbind" and i see that's what you're using.

So, you can use something like this:

jQuery(".sol-hide").on('click', function () { 
   sel = '.p2w-solution[target="' + id + '"]';

   ...

   jQuery(sel).off('click');
});

I would try that and see what happens.

Upvotes: 0

Related Questions