javascript - jquery 访问数据属性

Question

我正在使用引导模式来销毁任务对象。当我在索引页面上单击给定任务时，模式窗口会弹出，并且该任务的销毁链接会通过数据属性加载，因此当用户单击 #delete-task- 时，模态将知道应该销毁哪个任务提交按钮。

代码按原样运行，但我想使用 data-behavior="delete-task-submit" 而不是 #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

I'm asking this because #delete-task-submit is used in the first js call for finding/setting data-task-destroy-link and don't know how else I can find that data attribute without adding id/extra class there.

将 $('#delete-task-submit') 替换为 $('[data-behavior="delete-task-submit"]') 选择器那部分代码并将 data-behavior="delete-task-submit" 属性添加到您的链接。

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