javascript - javascript 可以从单独的方法中监听确认对话的结果吗？

Question

我知道只有当确认对话框在函数内部进行确认时，通常的 JS 才采取操作的方式，就像这个 jQuery 示例:

<script type="text/javascript">
  $(function () {
    $("#dropdown").change(function () {
      var success = confirm('Are you sure want to change the Dropdown ????');

      if (success == true) {
        // do something                  
      }
      else {
        // Cancel the change event and keep the selected element
      }
    });
  });
</script>

这对我来说不起作用，因为确认是 Rails 助手的一部分:

<%= link_to "Delete", {:controller => 'foo', :action => 'delete', :id => @item.id},
  {:method => :post, :confirm => "Are you sure?", :class => "start_spinner"} %>

我想在点击时运行一些 javascript(隐藏链接以防止点击两次)，但前提是确认为真。不幸的是，至少在 Rails 2.3.x 中，当存在 :method 或 :confirm 选项时，不可能使用 :onclick。 (此行为已注明 on ApiDock for the link_to helper，在我的应用程序中也是如此。)

编辑: 我想我通过包含 ApiDock 中的示例而不是我的确切代码而造成了一些困惑。对于那个很抱歉。我修改了下面的代码以反射(reflect) Rails 在包含 :method => :post 选项时的行为，因为它必须包含在我的代码中。两个输出之间的区别仍然只是删除了 destroyJsFunction 方法，但是 onclick 中确实发生了一大堆其他事情，这似乎干扰了解决方案的实现由 Sukima 和 agnoster 建议。

<%= link_to "Delete", {:controller => 'foo', :action => 'delete', :id => @item.id}, :method => :post, :confirm=>"Are you sure?", :onclick=>"destroyJsFunction()", :class => "start_spinner" %>
# expected output
# => <a href="/foo/delete/1" class='start_spinner' onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'CSRF_TOKEN'); f.appendChild(s);f.submit(); }; {destroyJsFunction()}; return false;">Delete</a>
# actual output
# => <a href="/foo/delete/1" class='start_spinner' onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'CSRF_TOKEN'); f.appendChild(s);f.submit(); }; return false;">Delete</a>

结束编辑

因为我正在使用 Rails 提交 POST 请求，所以我不能只用纯 HTML 重写链接。

我想在单击类 start_spinner 的链接时运行我的 javascript，但如果确认为假，我找不到重新显示链接的方法。有没有办法让单独的 javascript 监听确认对话的结果？

Answer 1

confirm 所做的只是在 HTML 中放置一些 JavaScript，它完全按照您的描述进行操作:提示用户，然后在成功响应时提交表单。

如果您想做一些不同的事情，那么您将不得不编写自己的确认方法。由于逻辑非常简单，我相信 Rails 团队认为如果您想要更多，您可以自己编写。

创建一个执行确认和 if/else 逻辑的函数。我会使用我自己的不显眼的 JS，比如使用 jQuery 来附加点击事件，但你也可以使用 rails link_to 辅助选项 :onclick 就像你上面提到的(我个人讨厌这个选项。)

jQuery 示例:

$(function() {
  $('a.destroy').on('click', function(e) {
    e.preventDefault();
    var $el      = $(this);
    var response = confirm($el.data('confirm') || 'Are you sure?');

    if (!response) { return; }

    $el.css({'pointer-events': 'none'});

    $.ajax({
      url:  $el.attr('href'),
      type: 'DELETE',
      data: {_method: 'delete'}
    })
    .then(function() {
      alert('Deleted! we should do something here');
    })
    .fail(function() {
      alert('Opps, it didn\'t delete, check the respose to see why.');
    })
    .always(function() {
      $el.css({'pointer-events': 'auto'});
    });
  });

  // Only for SO example not needed for real code
  $('#reset').on('click', function(e) {
    e.preventDefault();
    $('a').css({'pointer-events': 'auto'});
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#/path/with/:id" class="destroy" data-confirm="Are your sure?">Confirm?</a>
(<a href="#" id="reset" title="this is not need in real code">reset</a>)