変数が正しく設定されない

Question

ユーザーがインデックスページの削除ボタンをクリックすると、モーダルがポップアップし、URLパスがモーダルの削除ボタンのtaskdestroylink属性に渡されます。これまではすべて正常に動作します。リンクをクリックする度に、属性が適切に設定されます。

2番目の機能は、AJAX要求をサーバーに送信することです。ページをリロードすると、最初の要求はうまく動作しますが、2番目の要求は最初の要求のルートを保持します。だからvar hrefは初めて正しく設定されますが、別のタスクを削除しようとすると、hrefの値はまだ最初のものに属しています。私がtaskdestroylink属性がDOMの新しい値を示すと述べたので、それは変です。

var href = $(this).data("taskdestroylink");の問題は何ですか？なぜ新しい価値を設定しないのでしょうか？

モーダルさんは、このリンクをクリックすることで開かれます：

<li> 
    <a href="#" data-toggle="modal" role="button" data-target="#delete-task-modal" class="open-delete-task-modal" data-taskdeletelink="<%= user_task_path(current_user, task) %>">Delete Task</a> 
</li> 

モーダル：

<div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal" id="deletetaskclose">Close</button> 
    <a href="#" id="delete-task-link" type="button" class="btn btn-danger" data-taskdestroylink >Delete Task</a> 
</div> 

JS：

$(document).on('click', '.open-delete-task-modal', function (event) { 
    var taskDeleteLink = $(this).data("taskdeletelink"); 
    $('#delete-task-link').attr("data-taskdestroylink", taskDeleteLink); 
}); 

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

Answer 1

とてもものを選択data()とattr()を混合することが悪い考えですとそれに固執する。

.data("taskdestroylink", taskDeleteLink); 

data()へ

変更

.attr("data-taskdestroylink", taskDeleteLink); 

は、独自の内部ストレージではなく、実際の属性を使用しています。