0

特定のスパン要素がクリックされたときにクリックイベントをトリガーしたいと思います。スパン要素は、実際にはテーブルの上にあるボタンです。

次の作品：

$("th > span").click(function() {
        alert('hi');
});

以下は機能しません。

$("th.sorting > span").click(function() {
        alert('hi');
});

th要素のクラスがsortingからsorting_ascまたはsorting_descに変わり、クリックされたボタンのタイプに応じて特定のイベントをトリガーしたいと思います。

アップデート：

興味深いことに、ソースを表示すると、次のものしか表示されません。

<th><span class = 'btn' style = 'width:90%'>Image<span id='i'></span></span></th>

...しかし、firebugを介して「要素を検査」すると、次のように表示されます。

<th class="sorting" role="columnheader" tabindex="0" aria-controls="dispensers" rowspan="1" colspan="1" style="width: 187px; " aria-label="Image: activate to sort column ascending"><span class="btn" style="width:90%">Image<span id="i"></span></span></th>

しかし、これが私の問題の根本ではないと思います。Jqueryが後者の要素コードを認識していると想定しているためです。

（jqueryプラグイン「datatables」は更新されたコードを担当します）

アップデート：

最終コード：

$('th').on('click', '.sorting > span', function() {
        $("span#i").html('');
    jQuery("span#i", this).html(' <i class=\"icon-chevron-up\"></i>');
    });

$('th').on('click', '.sorting_asc > span', function() {
        $("span#i").html('');
    jQuery("span#i", this).html(' <i class=\"icon-chevron-down\"></i>');
    });

$('th').on('click', '.sorting_desc > span', function() {
        $("span#i").html('');
    jQuery("span#i", this).html(' <i class=\"icon-chevron-up\"></i>');
    });

外観：

ここに画像の説明を入力してください

4

3 に答える 3

0 
$('th').on('click', '.sorting > span', function()
{
    alert('hi');
});

おかげで、$.on要素をイベントハンドラーにバインドして、バインド変更のセレクターの2番目の部分がそれらを追跡するかどうかを確認できます。

于 2012-04-25T06:15:52.913 に答える
0

コードを次のsynatxに変更します。

$("th.sorting span").click(function() {
    alert('hi');
});

質問のように欠落している「>」に注意し、代わりにスペースだけに注意してください。

于 2012-04-25T06:17:35.317 に答える
0

私があなたの質問を正しく理解している場合は、thのクラスに応じて、昇順の並べ替えを実行する必要があるのか​​、降順の並べ替えを実行する必要があるのか​​を特定する必要があります。それが正しければ、次のようなものを試してください（テストされていません！）：

$("th > span").click(function() {
     var th = $(this).parent("th"); 
     if($(th).hasClass("sorting")) {
       //do something
     } elseif($(th).hasClass("sorting_asc")) {
       // Sort ascending
       $(th).removeClass("sorting_asc");
       $(th).addClass("sorting_desc");
     } elseif($(th).hasClass("sorting_desc")) {
       // Sort descednding
       $(th).removeClass("sorting_desc");
       $(th).addClass("sorting_asc");
    }
});
于 2012-04-25T06:21:42.417 に答える