CODEWITHSUNDEEP
jquery
user405398
user405398

Reputation:

How to use "this" keyword inside jquery delegate function?

I am trying to show a hidden character on mouseover using delegate.

This is the example code. The alert is working fine. But the hidden a is not getting displayed.

<html>
<body>
<script type="text/javascript" src="jquery.js"></script>

     <script type='text/javascript'>
     $(document).ready(function(){
        $("a.del").hide();
        this.showHidden = function(event){
        if (event.type == 'mouseover') {
            alert("X");
        $(this).closest(".del").show();
        }
        };
        $("#holder").delegate("div.inner", "hover", this.showHidden);
     });
    </script>
    <div id='holder'>
        <div class='inner' style="background-color:red">a
            <a class='del'>X</a></div>
        <div class='inner' style="background-color:red">a
            <a class='del'>X</a></div>
        <div class='inner' style="background-color:red">a
            <a class='del'>X</a></div>
        <div class='inner' style="background-color:red">a
            <a class='del'>X</a></div>
    </div>
</body>
</html>

Any suggestions,

Thanks!

Upvotes: 1

Views: 1561

Answers (4)

jxpx777
jxpx777

Reputation: 3641

The bit where you define showHidden as a function is creating a global which is probably not what you want. The reason for this is that the callback is called using the call() function with this set to the document. I think what you want is a local var showHidden. Then, this is available because of the closure created when you set up your delegate method. The $(this) inside showHidden's body will be correctly set to the element that's being matched because delegate uses the apply function and sets this as well. All that being said, your callback is so short, I would just inline it in the call to delegate as an anonymous function.

Plus, this is all moot because you can do what you want to do with CSS!

div#holder a.del { 
    display:none; 
}
div#holder:hover a.del {
    display:inline;
}

Some older browsers don't support this, but this is the ideal way to go so you don't even have to use JS at all.

Upvotes: 0

melaos
melaos

Reputation: 8418

i think instead of using closest, you can just narrow it down and use children as like below.

http://jsfiddle.net/47Vjy/

but i'm not quite sure why are u trying to use delegate though? from my understanding it's use when you have ajax codes overwriting your html and you need the javascript events to be refreshed too?

Upvotes: 0

Teja Kantamneni
Teja Kantamneni

Reputation: 17472

When you are defining a function, you don't need to add this before it like you are doing in this.showHidden = function(event){. In your code, you can directly add the function to the delegate as an anonymous function or define it outside with out a this and refer it. The $(this) inside the function refers to object on which delegate is triggered, in this case div.inner on which mouse the hovered. Then we are trying to find all the elements inside the div with class .del and showing them. you can use other functions like children too.

Here is the working code in jsbin

$("a.del").hide();
        $("#holder").delegate("div.inner", "hover", function(event){
          if (event.type == 'mouseover') {
            alert("X");
            $(this).find(".del").show();
          }
        });

Upvotes: 1

Brad Christie
Brad Christie

Reputation: 101614

Don't use .closest(). That goes up the tree to find a match. You should either be using $('.del',this) or $(this).children('.del') to find the anchor within the div.

Upvotes: 0

Related Questions