QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

jQuery DOM Manipulation

Posted on January 21, 2008 at 2:10 AM in General, jQuery

In case you hadn't heard yet, jQuery is a seriously bad-ass, lightweight library that I'm in love with. Here's what the official jQuery site has to say about it:

"jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript."

However, you can always leave it to a guy like me to find a way to screw things up.

One of the things that I love most about jQuery is the ability to so easily access the specific DOM element that you're looking for. Since my development tasks rarely focus on the UI, being able to quickly select elements has been predominantly all I've really put to use. However, jQuery also has some awesome DOM manipulation functions. Today I needed to add and remove DOM elements, so naturally, I turned to jQuery to lend a helping hand.

After spending a relatively short amount of time browsing the jQuery docs, I found the functions that I felt were best for the task at hand. In a matter of only a few minutes, I successfully had my newly-written "add an element" script up and running. Things were going nice and smooth, that is until I clicked on the "remove an element" button that I had included.

Whoooops! Not exactly the desired behavior. After spending God knows how long searching through the docs to see what I did wrong and not finding anything, I finally decided to shoot an email off to the jQuery list. As I've mentioned in previous posts, the jQuery list is one of the most active lists that I subscribe to, and once again, it did not disappoint. Within a matter of just a few minutes I had this reply from Karl Rudd:

"I think you're running up against a common misconception about how jQuery attaches events to objects."

He then went on to explain that when you add an element to the DOM, you have to bind the various events to the new element, or they won't be available to the new element. Hence the behavior I was experiencing when trying to manipulate (remove) the elements I had added.

Never fear though, there's already a most excellent plugin (my tribute to Wayne's World, most likely mis-quoted) that handles this for you. It is called Live Query. A quick check of the docs for the plugin, a quick edit of my script, and my issues were solved.

I don't know how common the misconception regarding this is, but Karl was most definitely correct in figuring that I was one who was "getting it wrong". I'm sure no one else fits into that category, but just in case you do, I decided to make a post about it so that hopefully you don't waste quite as much time as I did trying to "fix" something that is so simple and easy to do with jQuery. :-)

Comments

(Comment Moderation is enabled. Your comment will not appear until approved.)

On 1/21/08 at 1:15 PM, Dan G. Switzer, II said:

@Matt:

This seems to be a pretty common misconception amongst developers new to jQuery. When execute methods against a jQuery object/selector, it only knows about DOM objects that are currently in the DOM.

You can think of this like running SELECT SQL statement in CFQUERY. If some records are added/changed *after* you run the query, ColdFusion won't be aware of the changes unless you re-run the query.

Personally, I've stayed away from the LiveQuery plug-in. Instead when I have logic that I know I'll need to attach to DOM elements in the future, I just use a helper function to attach the events to DOM elements. This gives me explicit control over what's happening and it doesn't add overhead of monitoring the DOM.

Lots of people have used LiveQuery and had great success, but controlling things manually is my preference.

Hopefully this post might help others to understand the problem in a little more detail.

On 1/21/08 at 2:56 PM, Matt Quackenbush said:

@Dan - Thanks for the great feedback. Care to offer a little snippet that demonstrates your helper function attaching the event(s) to the DOM element(s)? I'd be very interested in learning more, and I'm sure others would be as well.

As a developer, I most definitely understand wanting as much control as possible over your environment, but as a jQuery n00b, I find that I often have to give up some control to get things accomplished in a timely fashion. Just like when I was a CF n00b all those years ago, I used all sorts of tags that I wouldn't touch with a 10-ft pole today (e.g. cfform, cfinsert, cfupdate, etc).

On 1/21/08 at 3:09 PM, Dan G. Switzer, II said:

@Matt:

A simple example would be:

function clickMe(o){
o.bind("click", function (){ alert('click me'); }).show();
}

Now for any element you want to attach the clickMe event and make sure the element is visible, you could just do:

clickMe( $('div.clickme') );

That's a simplified example, but it easily allows you to perform the exact same logic/conditions to multiple jQuery objects.

On 1/21/08 at 4:46 PM, Josh Nathanson said:

This is probably the most asked question on the jQuery email list - "why don't my events trigger on newly inserted elements?" It catches pretty much everyone off guard at first.

I am with you there Dan as far as not necessarily using LiveQuery. I only use it if I have a particularly complex UI that may have several event handlers that need to be rebound upon DOM insertions. If I only have one or two such rebindings I will set up a binder function as in your example.

[Add Comment]