Question

I am currently loading HTMl content via AJAX.

I have code for things on different elements onclick attributes (and other event attributes).

It does work, but I am starting to find that the code is getting rather large, and hard to read. I have also read that it is considered bad practice to have the event code ‘inline’ like this and that I should really do by element.onclick = foobar and have foobar defined somewhere else.

I understand how with a static page it is fairly easy to do this, just have a script tag at the bottom of the page and once the page is loaded have it executed. This can then attach any and all events as you need them.

But how can I get this sort of affect when loading content via AJAX. There is also the slight case that the content loaded can very depending on what is in the database, some times certain sections of HTML, such as tables of results, will not even be displayed there will be something else entirely.

I can post some samples of code if any body needs them, but I have no idea what sort of things would help people with this one. I will point out, that I am using Jquery already so if it has some helpful little functions that would be rather sweet!

Small code sample

This is a sample of code that is loaded via an AJAX request

<input type="submit" name="login" value="login" onclick="
if(check_login(this.form)){
  Window_manager.windows[1].load_xml('login/display.php?username=' + this.form.username.value + '&amp;password=' + this.form.password.value);
} else {
  return false;
}">

I know this is small sample, but this is the sort of thing I am on about. How can I have this code attached when the content is loaded?

Answer 1

jQuery .live() method is probably what you are looking for. It will attach click event to newly created HTML elements, so you don’t need to call your .click() with every reload of your update-panel.