I’m sure most jQuery users are familiar with the various methods used to attach event handlers (such as “onclick”, “onchange”, etc.) to elements that already exist on the page, but many probably aren’t aware that you can have jQuery automatically add those event handlers to any future elements, too.
Although jQuery can be extremely simple to use once you get the hang of it, there are so many functions and methods that it can be overwhelming and confusing at times.
One issue I had over the last week or so was figuring out how to simply traverse the DOM tree. Using jQuery selectors, it’s a breeze to do so; but what do you do when you’re working on a specific jQuery object and you want to go up or down the DOM tree?
Quite often, I find myself in a situation where I need to change the content of a form based on which checkboxes or radio buttons in a group are checked. I used to do this by adding an onclick and/or onchange event to each individual checkbox or radio button and then running a function to figure out whether or not the changed element was checked.
Then, I discovered how easy it is to do all of this on-the-fly with jQuery.
jQuery offers some really powerful functions and methods to utilize AJAX. One that I’ve discovered recently is the .find() method. The .find() method allows you to search for a specific HTML ID within some HTML and then returns only the content found within that ID.