JQuery単一行の複数のボタンを使用して複数のイベントをバインドする際に問題が発生するデータテーブル

Question

JQueryの新機能である、アプリケーションにデータテーブルが統合されています。 最後の列に2つのボタンを追加しましたが、特定のイベントでバインドする際に問題があります。

ここでは、テーブルの最後の列を生成するコードです。

"mRender": function (data, type, full) { 
    console.log('>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<'); 
    console.log(full); 
    if(full.status) { 
     return '<button href="#"' + 'id="'+ data + '">Edit</button> <input type="button" href="#"' + 'id="disable-'+ data + '" value="Disable"></input>';      
    } 
    else { 
     return '<button href="#"' + 'id="'+ data + '">Edit</button> <input type="button" href="#"' + 'id="enable-'+ data + '" value="Enable"></input>'; 
    } 
} 

ステータスに基づいて表示します。有効/無効を切り替えるボタンです。

今、JQueryを使用してonclickイベントをバインドします。

私は以下の方法で1つのボタンをバインドしました。

$('#tenantTable tbody').on('click', 'button', function() {   
    var data = table.row($(this).parents('tr')).data(); 
}); 
$('#tenantTable tbody').on('click', 'input[id="enable*"]', function() { 
    var data = table.row($(this).parents('tr')).data(); 
    console.log('>> DISABLE <<'); 
}); 
$('#tenantTable tbody').on('click', 'input[id="disable*"]', function() { 
    var data = table.row($(this).parents('tr')).data(); 
    console.log('>> DISABLE <<'); 
}); 

これはうまくいかない、私は上記のことができる方法はありますか？

Answer 1

このように、on()メソッドは、イベントハンドラを委任するのに適しています。あなたが使用 セレクタパラメータは、しかし、若干変更する必要があります。

$('#tenantTable tbody').on('click', 'input[id*="enable"]', function() { 
    // logic 
}); 

$('#tenantTable tbody').on('click', 'input[id*="disable"]', function() { 
    // logic 
}); 

*=セレクタはセレクタが含まれているに変換します。あなたのソリューションのための 代替^=

STARTSWITHセレクタ可能性があり、このロジックは、例えば、ダイナミックIDを持っていることを可能にする：

<input type="button" id="enable-5" data-action="enable" data-id="5" value="my button" /> 

セレクタのようなものが考えられます。

$(element).on('click', '[id^="enable-"]', function(){/*this: element where the id starts with enable-*/}); 
$(element).on('click', '[data-action="enable"]', function(){/*this: element where the data-action equals to enable*/}); 
$(element).on('click', '[data-id]', function(){/*this: element where data-id is defined*/});