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?