2

我问这个问题只是为了学习目的，因为我什至在写这篇文章之前就解决了这个问题，但也许你会指出一些对其他人有用的东西。

我正在使用Twitter Bootstrap及其模态库，这就是我的代码的作用。我们打开一个模态，要求用户输入一些 json，然后用户按下“计算按钮”来计算数据，然后模态关闭，因为data-dismiss.

我只想知道是否可以data-dismiss使用 jQuery、javascript 或其他东西来阻止由 html 属性触发的操作。

这是模态的 HMTL 代码：

<div class="modal hide fade" id="source_modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Manually insert the data</h3>
    </div>
    <div class="modal-body">
        <textarea class="source_input">Insert your data here</textarea>
        <div class="clear"></div>
        <a href="#" class="btn action_clear">Clear</a>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a class="btn btn-primary action_compute" data-dismiss="modal" href="#"><i class="icon-fire"></i> Compute</a>
    </div>
</div>

注意最后一个按钮（计算按钮）有data-dismiss="modal"

所以基本上，锚的类try catch附加了一个函数。action_compute

请参阅此 jQuery 代码：

// compute graph with json input
  $('.action_compute').on('click', function(event) {
    try
    {
      var json = JSON.parse($('.source_input').val());
      create_graph(json);
    }
    catch(err)
    {
      txt="There was an with your json data.\n";
      txt+="Error description: " + err.message + "\n\n";
      txt+="you can try to validate it with JSONLint. You may also leave the textarea blank for default behaviour";
      alert(txt);
    }
  });

是否可以防止触发的动作data-dismiss？

笔记：

  • Twitter bootstrap 提供了一个 jquery 方法来关闭模态，所以我删除了data-dismiss，并且我$('#upload_modal').modal('hide');只在尝试结束时才使用关闭模态，这样它就可以完成我想要的操作。
  • 当放置在 jQuery 代码的第一行时， jQueryevent.preventDefault();不会停止关闭操作catch(err)；）
4

1 回答 1

9

尝试添加一个监听器来阻止该hide方法的执行。

$('.modal').one('hide', function (e) {e.preventDefault()});​​​​​​​​​​​​​​​

将其放在错误捕获部分中。只要在调用之前处理了 click 事件hide()，这应该可以工作。

JSFiddle

由于您确实说过这个问题是出于学习目的，因此我将在此处添加一些有关 Bootstrap 插件事件架构的附加信息。

许多 Bootstrap 插件包括“之前”和“之后”事件。“之前”事件（在本例中为hide ）在相关方法的任何基本操作执行之前被触发并传播到 DOM 。当执行返回到最初触发的方法时，发生的第一件事是检查操作是否已被取消：

if (e.isDefaultPrevented()) return

因此，任何调用的事件侦听器都e.preventDefault()将有效地取消该操作。简单，如您所料。

任何实现良好的触发事件的 jQuery 插件都应该具有此功能。

于 2012-08-18T00:10:59.510 回答