How to not use JavaScript with in the elements events attributes but still load via AJAX

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.

Answer 2

You can get cleaner HTML code by making the event bindings in javascript. All you need are ways to identify the DOM objects for your HTML elements, like IDs.

If you have a link that has an ID "fooLink" you can do this in your JavaScript:

docuemnt.getElementById('foo').onclick = function () {
   //do your stuff here
}

This will have the same effect as binding the event in the "onclick" attribute if the link element in your HTML code.

That way, you can produce much cleaner HTML that is easier to read and maintain.