引导模态仅使用远程数据源触发一次
[英]bootstrap modals only firing once with remote datasource
问题描述
我有一个带有项目列表的表，每个项目都有一个带有状态列表的<select> 。 这是过程。
- 更改状态后，应触发模式。
- 模态提取ajax数据并正常工作。
- 然后，用户可以单击继续或从模态框中取消。
这是第一次工作，但是一旦消除了模态，模态就不会第二次加载。 数据正在更新-我可以在inspect元素中看到它，但是模态本身不会触发多次。
以下是相关代码：
HTML：
<select class="status form-control" data-id="14" data-ref="PT6F7SW514" name="status">
<option value="0" selected="selected">Pending</option>
<option value="1">Approved</option>
<option value="2">Rejected</option>
</select>
...
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Goes Here</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
JS：
$(document).ready(function(){
$('.status').change(function(){
var status = $(this);
var val = $(status).val();
var id = $(status).attr('data-id');
var ref = $(status).attr('data-ref');
$('.modal-body').load('/ajax/status/' + ref + '/' + val);
$('#modal').modal();
});
});
同样，这是一个包含多个项目的表，每个项目都有一个.status选择字段。 我可以在控制台中看到第二次尝试触发模式的尝试，但出现以下错误：
Uncaught TypeError: undefined is not a function
在JS中与此行相关联：
$('#modal').modal();
如果我注释掉$('.modal-body').load() ，它会起作用。
我尝试将其重写为单独的ajax调用，而不是使用.load() ，但是在那里我遇到了同样的问题。 似乎一旦我操纵“ .modal-body”，就会失去触发模态的能力。
2 个解决方案
解决方案1
0 2014-10-24 00:51:53
您可以使用
$('#modal').modal('show'); // or .modal('hide')
显示或隐藏模态
解决方案2
0 已采纳 2014-10-30 18:26:09
我发现了问题。 模态实际上不是问题。 我触发的视图（使用Laravel）还包括<head>和<body>标签（该模式用于电子邮件预览）。 这破坏了功能。
JavaScript计时器仅工作一次+引导3个模态
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.