[英]How do I make jquery events work in a bootstrap modal with dynamic content and selectors?
[英]How to make dynamic bootstrap modal?
例如,我有 3 個標簽,每個標簽都有不同的目標數據。
<a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#firstdata">
DATA 1
</a>
<a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#seconddata">
DATA 2
</a>
<a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#thirddata">
DATA 3
</a>
我如何獲得不同的 id、標題和內容?我不會創建 3 個模態,我只使用 1 個模態塊代碼
<div class="modal fade" id="firstdata" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">FIRST DATA</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>FIRST DATA CONTENT</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
在腳本中添加以下 J 查詢代碼
$(document).on('click','.btn-sm',function(){
$("#firstdata").modal();
});
請不要忘記導入 J 查詢,否則它將無法工作
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
上面的代碼應該在你的引導程序導入之上
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.