jquery内のネストされた要素の検索 - jquery、jquery-ui

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

clickイベントでid = "select_me"を取得しようとしていますが、button（）関数が特定のクラス名を挿入して正しく選択できないため、何も起こりません。

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

回答：

与えられたコードはうまく動きます。しかし、それらを呼び出す順序は重要です。

.button() すべてをクリアします click 論理的には「クリック」を処理することになっているので、イベントはカスタムを有効にするために click 子供たちのためのイベント。あなたが作成する必要があります click 呼び出し後のイベントリスナー .button()

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

それ以外の場合は、あなたが利用することができます .on() そして動的を作成する click Jqueryのイベントリスナー。

試す

$("#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);
});