Write clean jQuery

Question

Consider this HTML

<div id="container">
    <ul id="someID">
    <li id="someID1">
      <div id="someID2">
        <div class="someClass">
           <label>labelText</label>     
        </div>
      </div>
    </li>
    <li>2</li>
    <li>3</li>
    </ul>
</div>

and its script

<script>
$(function(){
$("#container label").click(function(){
    $(this).text("labelTextChanged");
});
})
</script>

Let this code written by some one else. And Now I want to change the text labelTextChanged to something new like labelTextChangedThen(This is just an example, sometimes I would need to change a lot of functionality). But now its difficult to find the attached event from the DOM? How can I avoid these kind of problems while writing code in jQuery?

Is it a good approach to use only attributes (self defined attributes) for selecting elements? (as in Angularjs)

NB: In reality it may better or worse.

Answer 1

There are many ways to write clean(er) code. I prefer to separate my handler methods (using named functions) from the handling code, use data-attributes to query and use event delegation. For your example, the code could be rewritten to something like:

function changeLabelText(e){
    var self = $(this);
    self.text(self.attr('data-changeOnClick'));
}

$(document).on('click', '[data-changeOnClick]', changeLabelText);

Where <label> would become <label data-changeOnClick="[changed text]">

In that case, changing the label text later would be as simple as changing the data-changeOnClick attribute in the html. Furthermore, it's easy to add the attribute to any element in your html, which will all trigger the click handler.

Writing separate handler methods also shows the methods in the aforementioned 'visual event 2' bookmarklet.

Furthermore, I always load my scripting at the end of the document (right before the closing </body>-tag), to avoid having to wrap method assignment within $(function() {/*...*/} ) or more generally having to use document load-handling.

See this jsFiddle

Answer 2

<script>
$(function(){
$("#container").on("click","label",function(){
  $(this).text("your desired text");
});
})
</script>

and i think to avoid these tyoe code you use visual event 2

Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements

reference on()

Answer 3

You can always use the visual event 2 bookmarklet to display the event listeners attached to any DOM element.

Answer 4

For the second question. In my opinion, the use of Id attribute to select dom is a good approach. Because for the elements in the same level, they should not be applied the same Id. And class filter will be good for selecting a group of elements with the same style. for example, you could use $('div[id="xxx"]') to make the code meaningful which means "the div with id equals xxx". For the first question, the code is not easy to read, you could try something like this $('#container').find('.someClass").children('label').click(...). Perhaps it is still not easy for reading the code. But for the code more complicated, the use of plugin will help you to make the project more readable and maintainable.