jquery - jquery中的嵌套元素搜索

Question

我正在使用 jQuery 和 jQuery ui。下面是我的标记：

<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(); 

我试图在点击事件上获取 id="select_me" ，但没有任何反应，因为 button() 函数插入了特定的类名，我无法正确选择它：

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

Answer 1

给定的代码工作正常。然而，调用它们的顺序很重要。

.button() 将清除所有click事件，因为它在逻辑上应该处理 'clicks' 。click因此，为了再次为孩子启用自定义事件。您必须click在调用后创建一个事件侦听器.button()

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

否则，您可以在 Jquery 中使用.on() 并创建一个动态click事件侦听器。

Answer 2

尝试

$("#sortable li.button_tab div[id^='button_tab']").click(function() {
   alert($(this).attr('id'));        
}); 

或者

$("#sortable li.button_tab").click(function() {
   var div_id = $(this).find("div[id^='button_tab']").attr("id");
   alert(div_id);        
});