jquery hover() not firing
I have a ASP.NET user control with the below markup:
<div>
<script id="myTemplate" type="text/x-jquery-tmpl">
<table id="t1"><tr>...<td class="myclass"><span>First Name:</span></td>...<\tr> <\table>
</script>
<table id="t2"><tr>...<td class="myclass"><span>First Name:</span></td>...<\tr> <\table>
<\div&开发者_JAVA技巧gt;
I want to fire the hover() for all classes with class="myClass". I have placed the below code:
$(document).ready(function() {
$(".myClass").hover(
function() {
alert('in...');
},
function() {
alert('out...');
});
}
The problem is .hover() fires for td element in table "t2" but not for "t1". Can anyone please help?
.hover adds the event handler statically.
Try doing
$(".myClass").live("hover",
function() {
alert('in...');alert('out...');
}
}
"t1" is within a jQuery template. I guess this template has not been inserted into the DOM when your ready-function gets executed. Therefore it's not there and no event is attached. You have two possibilities: either you fire your function after the template has been inserted or you use the "delegate"-function of jQuery which binds an event to all existing and future elements.
maybe because the HTML for t1 is in script tags? Or is that how jQuery templates work?
精彩评论