jQuery AJAX Load Content Problem

Question

I have a XHTML Strict Website 'main.php' with a normal Header where jQuery and other Scripts are loaded - also there's a menu:

  <div id="tab">
   <ul>
    <li><a href="#" onclick="content('load/feed.php');"><img src="feed_active.png" width="16" height="16" alt="Feed" /></a></li>
    <li><a href="#" onclick="content('load/feed2.php');"><img src="feed2_off.png" width="16" height="16" alt="Feed2" /></a></li>
   </ul>
  </div>

On Click the URL is loaded via jQuery.load(); into the #content div. Everything works fine and also the CSS defined in the main.php for the feed.php is added to the #content div.

Now the Problem: in the loaded File e.g. feed.php there's an Image

<img src="test.jpg">

i have added my own jQuery.mouseover, mouseout function - and it does not work! Also i have a input Box in the main.php and in the feed.php which is loaded via AJAX there's a link e.g.

<a href="#" onclick="jQuery('#entermessage').val('test');">

It does also not work, why? I thought the AJAX loaded page is integrated to the main.php? But all my JS/jQuery Stuff does not work?

Hope you understand and hope you can help?

Answer 1

Use the live event handlers:

Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.

Such as:

$('#myImage').live("mouseover", function() {
    // do stuff
}).live("mouseout", function() {
    // do stuff
});

$('#myLink').live("click", function() {
    // do stuff
});

Answer 2

okay - i did it and it worked perfect - thanks karim79, but now i have another "problem"... since i have added the "live" handler, when i click into the div... i have a hugh cursor on the left side blinking like it is an enterable text?!?!?

any ideas?