jquery accessible data-attrs

Question

私は、タスクオブジェクトを破壊するためにブートストラップモーダルを使用しています。インデックスページ上の特定のタスクをクリックすると、モーダルウィンドウがポップアップし、そのタスクの破棄リンクがデータattrによってロードされるため、ユーザが#delete-task-submitボタンをクリックしたときにどのタスクが破棄されるべきかがわかります。

コードはそのまま動作しますが、#delete-task-submitの代わりにdata-behavior="delete-task-submit"を使用して、これはスタイリングとは関係がなく、jsコール専用です。

正しい方法はありますか？私は#delete-task-submitが最初のjs呼び出しで/ data-task-destroy-linkの設定を見つけるために使用されているので、id/extraクラスを追加せずにそのデータ属性を見つける方法がわからないからです。

<div class="modal fade" id="delete-task-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content" style="text-align:left"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Delete Task</h4> 
     </div> 
     <div class="modal-body"> 
     <h4>Are you sure?</h4> 
     <p> </p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal" id="deletetaskclose">Close</button> 
     <a href="#" id="delete-task-submit" type="button" class="btn btn-danger" data-task-destroy-link >Delete Task</a> 
      <!-- DESTROY LINK GETS INSERTED HERE -->  
     </div> 
    </div> 
    </div> 
</div> 

$(document).on('click', '[data-behavior="open-delete-task-modal"]', function (event) { 
    var taskDeleteLink = $(this).data("task-delete-link"); 
    $('#delete-task-submit').data("task-destroy-link", taskDeleteLink); 
}); 

$(document).on('click', '#delete-task-submit', function (event) { 
    var href = $(this).data("task-destroy-link"); 
    $.ajax({ 
    type: "DELETE", 
    url: href, 
    dataType: "script" 
    }); 
}); 

Answer 1

#delete-task-submitは/を見つけ、データ・タスク・破壊・リンクを設定し、私はせずにそのデータ属性を見つけることができますどのように他を知らないためのjsの最初の呼び出しでを使用しているので、私はこれを聞いていますのよid/extraクラスをそこに追加します。

あなたのコードの一部で$('[data-behavior="delete-task-submit"]')セレクタで$('#delete-task-submit')を交換し、あなたのリンクにdata-behavior="delete-task-submit"属性を追加します。

<a href="#" id="" data-behavior="delete-task-submit" class="...">Delete Task</a>