How to implement unobtrusive javascript with dynamic content?

Question

I write a lot of dynamically generated content (developing for PHP), and I use jQuery to add additional flexibility and functionality to my projects.

The fact is that it’s rather difficult to add JavaScript unobtrusively. Here is an example:

You need to create a random number of div elements, each of which runs various onClick functions. I can use the onClick attribute for my div elements to call a JS function with a parameter, but this is just a bad solution. In addition, I could generate jQuery code along with each div in my PHP for loop, but again this will not be completely unobtrusive.

So what is the solution in such situations?

Answer 1

You need to add something to the div that determines what type of behavior they have, and then use jQuery to select these divs and add the behavior. One option is to use a class attribute, although this should probably be used for presentation and not for behavior. An alternative would be the rel attribute, but usually I find that you also want to specify different CSS for each behavior, so the class is probably in this case.

So, for example, suppose you require odd and even behavior:

 <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 selection mechanism that can be found on the basis of any CSS-based selector, and also supports some XPath and custom selectors. Get to know them! http://docs.jquery.com/Selectors

Answer 2

I would recommend you use this thing called “ Event Delegation. ” Here's how it works.

So, if you want to update the area, say the div, and you want to handle events unobtrusively, you attach the event handler to the div itself. Use whatever framework you prefer to make. Event nesting can happen at any time, whether you have an updated div or not.

An event handler attached to this div will receive the event object as one of its arguments. Using this event object, you can determine which element raised the event. You can refresh the div any number of times: events generated by child div elements will bubble up to the div, where you can catch and process them.

It also turns out to be a huge performance optimization if you are thinking of connecting multiple handlers to many elements in a div.

Answer 3

I would recommend dropping the W3C standards and writing out HTML properties for elements that need handlers attached to them:

Note: this will not break the page rendering!

 <ul> <li handler="doAlertOne"></li> <li handler="doAlertTwo"></li> <li handler="doAlertThree"></li> </ul> 

Declare a few functions:

 function doAlertOne() { } function doAlertTwo() { } function doAlertThree() { } 

And then using jQuery, for example:

 $("ul li").each(function () { switch($(this).attr("handler")) { case "doAlertOne": doAlertOne(); break; case ... etc. } }); 

Be pragmatic.

Answer 4

It's a little hard to tell about your question, but maybe you can use different jQuery selectors to configure different types of clicks? For example, let's say you have the following:

 <div class="section-1"> <div></div> </div> <div class="section-2"> <div></div> </div> 

Perhaps you can do the following in jQuery:

 $('.section-1 div').onclick(...one set of functionality...); $('.section-2 div').onclick(...another set of functionality...); 

Basically, decide based on context what should happen. You can also select all divs and check on some parent or child element to determine what functionality they get.

I need to know more about the specifics of your situation in order to give more focused advice, but maybe this will help you get started.

Answer 5

I don't know about jQuery, but I know that the DOJO toolkit makes very unobtrusive Javascript possible.

Take a look at an example here: http://dojocampus.org/explorer/#Dojo_Query_Adding%20Events

The demo dynamically adds events to a pure class-based html table.

Another example is the behavior functions described here: http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/