Question

I am using jQuery and jQuery ui. Below is my markup:

<div id="content">   
   <ul id="sortable">             
    <li class="button_tab"><div id="select_me">Select Me</div></li>
    <li class="button_tab"><div id="select_me_1">Select Me 1</div></li>
    <li class="button_tab"><div id="select_me_2">Select Me 2</div></li>           
  </ul>  
</div>

jquery:

 $( ".button_tab" ).button(); 

I am trying to get the id=”select_me” on click event, but nothing happens, because the button() function inserts specific class name and i can’t select it right:

 $('div#content ul#sortable li.button_tab div').click(function() {
   alert($(this).attr('id'));        
 }); 

Answer 1

The given code works fine. However the sequence of calling them matters.

.button() will clear out all click events since it is logically supposed to handle ‘clicks’ . So for enabling custom click events again for the children. You have to create a click event listener after calling .button()

1. $( ".button_tab" ).button();
2. $('div#content ul#sortable li.button_tab div').click(function() {
alert($(this).attr('id'));
});

Or else, You can make use of .on() and create a dynamic click event listener in Jquery.