引导模式打开时调用 Jquery 函数
Posted
技术标签:
【中文标题】引导模式打开时调用 Jquery 函数【英文标题】：Call Jquery function when bootstrap modal is open 【发布时间】：2018-06-05 01:40:45 【问题描述】：我使用 Boostrap 3.7 和 Blade (Laravel 5.5)。
当我的 boostrap 模态打开但它不起作用时，我试图显示 console.log('works')。
HTML：
@foreach(...)
...
<div class="modal fade" id="reservationModal" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
<div class="modal-dialog">
...
</div>
</div>
@endforeach
JS：
$('#reservationModal').on('shown.bs.modal', function (e)
console.log('works');
);
我关注了这个文档：https://getbootstrap.com/docs/3.3/javascript/#modals
我已经读过：Calling a function on bootstrap modal open
感谢您的帮助！
编辑 1：
我用这段代码解决了问题：
$(document).on('show.bs.modal', '#reservationModal', function (e)
console.log('works');
);
但是如何区分模态（因为它们进入foreach循环）？
类似：
$(document).on('show.bs.modal', '#reservationModal-specificId', function (e)
console.log('works');
);
【问题讨论】：
您使用的是正确的事件，但是当您在循环中创建该元素时，您似乎在多次复制reservationModal id。这可能是您的问题的原因
这段JS代码你在哪里写的？是在模态创建之后吗？
@FarazPV 我认为不是因为<head></head>上调用了JS文件
@RoryMcCrossan 我该如何解决这个问题？在 id='reservationModal' 上有一个 ID，比如 id='reservationModal-3' ？但是如果这样做，如何检测它是打开的模态3或模态6？
在@endforeach 之后给出这段代码
【参考方案1】：
正如@Rory McCrossan 在评论中指出的那样，id 的重复是您代码的关键问题。要解决此问题，您可以使用 index:
id="reservationModal-$loop->index"
如果您想在每个模式上调用，请使用这样的选择器开始：
$('[id^="reservationModal-"]').on('shown.bs.modal', function (e)
console.log('works');
);
或者，只使用索引选择器在特定模式上使用：
$('#reservationModal-3').on('shown.bs.modal', function (e)
console.log('works');
);
【讨论】：
我的目标是为每个模式都有一个通用代码是的。但是您使用$('[id^="reservationModal-"]') 和$loop->index 的解决方案似乎不起作用，因为模式根本没有打开。
我认为[id^="reservationModal-"] 的第一个解决方案是正确的方法，但没有奏效，我不知道为什么。【参考方案2】：
我认为您的事件侦听器是在 html 打印之前创建的。 所以试试这个代码。
$(document).on('show.bs.modal', '#reservationModal', function (e)
console.log('works');
);
$(document).on('show.bs.modal', '#reservationModal', function (e) );
粗体字符将有助于识别您的模态
回答您的更新部分
运行循环并按如下方式创建您的模态
<div class="modal fade reservationModal" id="reservationModal1" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
<div class="modal-dialog">
...
</div>
</div>
<div class="modal fade reservationModal" id="reservationModal2" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
<div class="modal-dialog">
...
</div>
</div>
...... and so on
给reservationModal作为类
并将 id 作为附加到它的递增值
$(document).on('show.bs.modal', '.reservationModal', function (e)
console.log($(this).attr("id"));
);
【讨论】：
是的，我的事件是之前创建的，因为 JS 是在<head></head> 中创建的。这是可行的，但如何知道调用的是哪个模式？
我已将 reservationModal 作为 id
$(document).on('show.bs.modal', '#reservationModal'
是的，但我的代码在@foreach() 中，所以每个模态都是相同的 id 对吗？何区分它们...
你得到控制台了吗？以上是关于引导模式打开时调用 Jquery 函数的主要内容，如果未能解决你的问题，请参考以下文章