How to implement unobtrusive javascript with dynamic content generation?

javascript, jquery

Solution

You need to add something to the divs that defines what type of behaviour they have, then use jQuery to select those divs and add the behaviour. One option is to use the class attribute, although arguably this should be used for presentation rather than behaviour. An alternative would be the rel attribute, but I usually find that you also want to specify different CSS for each behaviour, so class is probably ok in this instance.

So for instance, lets assume you want odd and even behaviour:

<div class="odd">...</div>
<div class="even">...</div>
<div class="odd">...</div>
<div class="even">...</div>

Then in jQuery:

$(document).load(function() {
$('.odd').click(function(el) {
// do stuff
});
$('.even').click(function(el) {
// dostuff
});
});

jQuery has a very powerful selector engine that can find based on any CSS based selector, and also support some XPath and its own selectors. Get to know them! http://docs.jquery.com/Selectors

Problem

I write a lot of dynamically generated content (developing under PHP) and I use jQuery to add extra flexibility and functionality to my projects. Thing is that it's rather hard to add JavaScript in an unobtrusive manner. Here's an example: You have to generate a random number of `div` elements each with different functionality triggered `onClick`. I can use the `onclick` attribute on my `div` elements to call a JS function with a parameter but that is just a bad solution. Also I could generate some jQuery code along with each div in my PHP `for` loop, but then again this won't be entirely unobtrusive. So what's the solution in situations like this?

Original source