jQuery 在 Twitter Bootstrap 模式中显示/隐藏

Posted 2023-03-05

【中文标题】jQuery 在 Twitter Bootstrap 模式中显示/隐藏

【英文标题】：jQuery show/hide within Twitter Bootstrap modal

【发布时间】：2012-12-07 04:19:57

【问题描述】：

这里有一些代码可以在普通页面上运行，但不能在引导模式中运行，知道为什么这可能不起作用吗？

<script type="text/javascript">
$(document).ready(function()
 $('.box').hide();
  $('#dropdown').change(function() 
    $('.box').hide();
    $('#div' + $(this).val()).show();
 );
);
</script>
<form>
 <select id="dropdown" name="dropdown">
  <option value="0">Choose</option>
  <option value="area1">DIV Area 1</option>
  <option value="area2">DIV Area 2</option>
  <option value="area3">DIV Area 3</option>
 </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

【参考方案1】：

因为在加载父页面时，$(document).ready() 已经被触发了。您应该收听引导模式的 shown 事件。我假设您在模态内容中使用 AJAX？

【讨论】：

酷。监听显示事件的正确方法是什么？现在内容是通过 django 模板进来的。

使用 jQuery .on 将侦听器附加到一个共同的父级（如document），然后只要它们在同一个window 对象内完成就无关紧要（服务器上的内容并不重要）。像$(document).on('shown', function(event) /*existing callback*/); 这样的东西。为了清晰和保护，我还建议使用选择器，但这不是必需的。