Question

我正在使用bootstrap模式来销毁任务对象。当我点击索引页面上的给定任务时，弹出模态窗口，并通过数据attr加载该任务的destroy链接，因此当用户点击#delete-task-submit按钮时，modal将知道应该销毁哪个任务。 / p>

代码按原样运行，但我想使用data-behavior="delete-task-submit"而不是#delete-task-submit来清楚这与样式无关，而且它只适用于js调用。< / p>

这样做的正确方法是什么？我问这个是因为#delete-task-submit用于查找/设置data-task-destroy-link的第一个js调用中，并且不知道如何在不添加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调用中用于查找 /设置data-task-destroy-link而且不知道我怎么能找到它数据属性没有在那里添加id / extra类。

将$('#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>

jquery访问data-attrs

1 个答案: