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 ty开发者_JS百科pe='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!
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();
}
});
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.
- .children() Help
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?
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.
加载中,请稍侯......
精彩评论