【问题标题】:Bootstrap: How to remove click event from buttonBootstrap:如何从按钮中删除点击事件
【发布时间】:2013-01-10 20:51:17
【问题描述】:

Twitter Bootstrap 能够“通过数据属性”调用模式,这很好,但我不知道如何关闭它们或替换按钮的事件。

通过属性设置示例:

<button id="launch-btn" type="button" data-toggle="modal" data-target="#myModal">
   Launch modal
</button>

我试过了:

$('#launch-btn').off('click');
$('#launch-btn').unbind('click');
$('#launch-btn').on('click', function(e){e.preventDefault();});

但所有似乎仍然打开模态。如果满足条件,我想阻止默认模式打开并用另一个操作替换它。我知道我可以使用 modal 的 show 事件来阻止显示,但我不想在这里这样做,我想通过按钮来控制行为。

我也意识到使用 JS 而不是让引导程序通过数据属性处理它可能更容易处理动态模式的创建,但我现在是一个好奇的乔治,我试图发现什么我做错了。

【问题讨论】:

  • 查看 bootstrap-modal.js.. 这就是他们绑定点击事件的方式$(document).on('click.modal.data-api', '[data-toggle="modal"]'
  • @wirey:是的——我也做了同样的事情。我对使用该插件的容易程度感到惊讶。我正在回答中,因为使用off 确实有效。我正在测试如何使用按钮的 ID。
  • 我想知道event.stopImmediatePropagation() 是否可以满足您的需求,因为事件处理程序已绑定到文档。 也许不是似乎委托事件无法停止传播
  • @wirey:我认为我们正在做同样的研究——我得出了同样的结论。我还没有尝试通过属性处理来使用 Tony 的建议(听起来理论上可行);否则,我将放弃并重新评估当前的文档结构。如果我必须使用比我预期更多的自写 JavaScript,我还不如做对。

标签: jquery twitter-bootstrap modal-dialog


【解决方案1】:

这可行:$(document).off('click.modal.data-api', '[data-toggle="modal"]');

【讨论】:

    【解决方案2】:

    尝试将模式的显示选项设置为 false:

    http://twitter.github.com/bootstrap/javascript.html#modals

    您可以只附加另一个数据属性:

    <button id="launch-btn" type="button" data-toggle="modal" data-show="false" data-target="#myModal">
       Launch modal
    </button> 
    

    【讨论】:

    • 所以我希望存在默认条件(它在单击按钮时显示),除非页面包含一些数据,在这种情况下我想将其关闭。查看 jQuery API,似乎 off 仅适用于 on 注册处理程序的方式,在这种情况下,它适用于模态的所有内容
    • 这可以通过 jQuery 应用。 $('#launch-btn').attr('data-show','false'); ...这样您就可以根据情况决定采取行动或不采取行动。
    • 这正是我想要的。我很好奇更改属性如何触发 JavaScript 事件。我知道最初的 JS 使用它,但我没有意识到这是在页面加载后更新或使用的。也许这是 HTML5 特有的,或者我缺少 bootstrap-modal.js 中的魔力;无论如何,更新您的答案,我会投票/选择它。
    • 实际上在测试时似乎并没有即时执行此操作:$('#launch-btn').click(function(){$(this).attr('data-show',toggle()+'')}) 其中toggle 是一个切换并返回真/假全局值的函数。我的假设是我应该能够在关闭和开启事件之间来回切换。
    • true/false 将是一个字符串,如果它是一个创建 true/false 的函数,它很可能只是产生一个 0/​​1,这不会产生相同的结果。尝试让你的函数创建一个字符串 true/false。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多