Question

我的应用程序中有多个bootstrap模式，我想在每个模态shown.bs.modal事件上调用相同的函数。我想在一个地方全局地做这件事，但困扰我的是这个事件需要一个特定模态的id属性，如下所示：

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

我想知道有没有办法在全局范围内进行操作，就像某个模态显示，然后是一个函数调用？

Answer 1

$('#myModal')只是一个jQuery选择器。阅读有关jQuery选择器的more。我们可以用$()编写任何内容，如：

$("#myModal")         // Select an element with id "myModal"
$("body > #myModal")  // Select an element with id "myModal" which is a immediate child of the "body" tag
$("#foo .modal")      // Select all elements with a class "modal" which is inside an element with id "foo"

因此，在Bootstrap中，每个模态都有一个类.modal，您只需使用该类来附加全局侦听器：

$('.modal').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

或者，就像其他人提到的那样，你可以为你想要做一些像do-common-stuff这样的常见事情的所有模态上课：

<div class="modal do-common-stuff" id="foo">...</div>
<div class="modal" id="bar">...</div>
<div class="modal do-common-stuff" id="tango">...</div>

以后，

$('.do-common-stuff').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

Answer 2

您可以使用模型的类名称

$('.modelClassName').on('shown.bs.modal', function () {
 $('#myInput').focus()
})

Answer 3

用课程

试试

$('.classNameOfModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Answer 4

考虑通过班级名称进行访问。点'。'用于上课。

$('.myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Answer 5

这对我很有用。

$(window).on("shown.bs.modal", function () {
            //Do what ever you want here...
        });

如何获取没有Id的Bootstrap模式？

5 个答案: