How to manipulate ajax loaded content?

Question

Hello!

I'm loading external page via jquery.ajax:

$("#mydiv").load("filter.html");

content of example.html:

<div id="filterdiv"><input id="filter" name="filter" size="40"/></div>

then I want to manipulate input#filter, so I wrote in javascript:

$('#filterdiv input').focus(function(){
    alert(Hello);
}

and nothing happens. If I paste a code of filter.html directly to a page, it works, but when I call it via ajax,

$('#filterdiv input').focus(function(){
    alert(Hello);
}

doesn't see ajax loaded content. Why do I do wrong? How can I manipulate ajax loaded html?

Answer 1

You need to apply the action 'after' the AJAX page is loaded. Which might mean adding it to the end of the AJAX page. Or on a callback function.

$("#mydiv").load("filter.html", null, function(){ $('#filterdiv input').focus(function(){
    alert("Hello");
} });

Unlike server-side programming pages, even if the page is currently fetching, the browser will continue to execute the next line of code. If you bind something (like click) on the next line, the page is probably not loaded, so it won't be bound.

The callback function on the other hand is only executed when the AJAX page is actually loaded.

Answer 2

You need to add the event handler after the html is loaded. Also note that I've quoted the alert parameter (not sure if that's really a problem or a typo in your question).

$("#mydiv").load("filter.html", null, function() {
   $("#filterDiv input").focus( function() {
      alert('Hello');
   });
});

If you were using one of the events that could be handled by the live method, you could have used that to set up your handler once for the entire life of the page. Unfortunately the focus event isn't one of those.

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

Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

Currently not supported: blur, focus, mouseenter, mouseleave, change, submit