jquery: unbind or remove a function

Discussion in 'jQuery' started by nickjason, Jul 25, 2009.

  1. #1
    Hi,
    how can I unbind or remove a function with jquery?

    for instance, this is my html,

    Code:

    <li><img src="..." alt="1"></li>
    <li><img src="..." alt="2"></li>
    <li><img src="..." alt="3"></li>
    <li class="padlock"><img src="..." alt="4"></li>

    i will display the value of alt with the tooltip code below,

    Code:

    $(document).ready(function(){
    tooltip();
    });


    this.tooltip = function(){

    xOffset = 10;
    yOffset = 20;

    $("li").hover(function(event){
    var title = $(this).find("img").attr("alt");
    $("body").append("<p id='tooltip'>"+ title +"</p>");
    $("#tooltip")
    .css("top",(event.pageY - xOffset) + "px")
    .css("left",(event.pageX + yOffset) + "px")
    .fadeIn("fast");
    },
    function(){
    $("#tooltip").remove();
    });
    $("li").mousemove(function(event){
    $("#tooltip")
    .css("top",(event.pageY - xOffset) + "px")
    .css("left",(event.pageX + yOffset) + "px");
    });
    };

    i want to remove this tooltip function when the class 'padlock' is clicked,

    Code:

    $('.padlock').click(function(){
    $(this).append("<li class=\"locked\"></li>");
    $('.padlock').unbind('mouseenter mouseleave');
    $('.padlock').unbind('click');
    $(".unlocked").remove();
    $(this).addClass('currentlock');
    removeMouseover();
    lockoff();
    });

    many thanks,
     
    nickjason, Jul 25, 2009 IP
  2. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #2
    just check at the top of the hover and out functions if $(this).hasClass("padlock") and return false.

    i.e.
    if ($(this).hasClass("padlock"))
        return false;
    PHP:
    it's far more practical this way - should you decide to remove the class, you dont need to bind the hover again, it will just work.

    i just looked at the code in more details, you actually need to check for hasClass("locked") on a child of $(this) instead... i am sure you can do something here was well like:
    
    if ($(this).getChildren("li .locked").length) return false; // should be an array with 1 element if locked li is there.
    
    PHP:
    check the syntax, i am a mootools-er and use jquery rarely if ever but i am sure this is a normal feature. you really will be much better off by adding the locked class to the actual parent so that you can do a faster check on the hover.

    good luck :)
     
    Last edited: Jul 28, 2009
    dimitar christoff, Jul 28, 2009 IP
  3. nickjason

    nickjason Peon

    Messages:
    414
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks dimitar christoff ...i hope it will work for me.
     
    nickjason, Jul 30, 2009 IP