javascript - How to avoid locking my HTML structure when using jQuery to create rich client experiences?

Question

I've had this happen to me three times now and I feel it's time I learned how to avoid this scenario.

Typically, I build the HTML. Once I'm content with the structure and visual design, I start using jQuery to wire up events and other things.

Thing is, sometimes the client wants a small change or even a medium change that requires me to change the HTML, and this causes my javascript code to break because it depends on HTML selectors that no longer exist.

How can I avoid digging myself into this hole every time I create a website? Any articles I should read?

Answer 1

Make your selectors less brittle.

• Don't use a selector by index, next sibling, immediate child, or the like
• Use classes so even if you have to change the tag name and the element's position in the HTML, the selector will still work
• Don't use parent() or child() without specifying a selector. Make sure you look for a parent or child with a specific class

Sometimes, depending on the amount of rework, you'll have to update the script. Keep them as decoupled as possible, but there's always some coupling, it's the interface between script and HTML. It's like being able to change an implementation without having to change the interface. Sometimes you need new behavior that needs a new interface.

I think the best way to help you is for you to show a small sample of a change in the HTML that required a change to your jQuery code. We could then show you how to minimize changes to JS as you update the HTML