Question

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 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