模式中的Bootstrap 3.2 jQuery

Bootstrap 3.2 jQuery in modals

本文关键字：jQuery Bootstrap 模式      更新时间：2023-09-26

我想在Modals中使用一些jQuery。对于类似的表单验证，但问题更为普遍。

我从另一个html文件加载模式的内容。在Bootstrap 3.1.x中，它只需要将jQuery代码放在html文件的末尾，从那里我可以获得我的modalcontent。

但现在使用Bootstrap 3.2。jQuery在模态中不再工作。

在模态之外，他们工作得很好。即使我不在模态中调用contentpage，jQuery也能工作。

下面是一些示例代码，展示了我如何调用模态：

<a data-toggle="modal" href="dir" data-target="#inputModal">Some Button</td>
<div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-labelledby="inputModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

以及模式内容的content.html

<form name="contactdeleteform" method="post">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="moduleModalLabel">topic</h4>
  </div>
  <div class="modal-body">
      <select id="modules" name="modules" class="form-control select2" multiple>
         <option value="1">option 1 </option>         
      </select>          
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Back</button>
    <button type="submit" id="contactDataSubmit"  class="btn btn-primary" >Submit</button>
  </div>
</form>

<script type="text/javascript">
$('.select2').select2({placeholder: "Bitte Auswahl treffen"});
</script>

使用select2库进行更好的多选。例如，我无法让它发挥作用。

/编辑：试图更清楚地解释这个问题。

/edit2：我用Firefox调试工具检查了网络，当我加载模式时没有jQuery调用

if you add to your own jquery in bootstarp 3.2 use (noConflict) in your own jquery script
Example: 
<form name="contactdeleteform" method="post">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="moduleModalLabel">topic</h4>
  </div>
  <div class="modal-body">
  Body content
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Back</button>
    <button type="submit" id="contactDataSubmit"  class="btn btn-primary" >Submit</button>
  </div>
</form>

（没有更改，一旦检查您的总代码，它就在我的系统中工作）

http://jsfiddle.net/suryakiran/ffqhtr35/

请在(http://jsfiddle.net)。我会尽力解决你的问题。我也是引导程序的初学者。如果你在jsfiddle.net中做你的例子，我会从你那里学到更多

我找到了一个朋友建议的解决方案。

当您将模式框架的id放入jquery中时，它就可以工作了。

$(#modalid #idforjqueryelemnt).function()(...

因此，在我的问题中，我只更改了content.html 的jquery

<script type="text/javascript">
$('#inputModal .select2').select2({placeholder: "Bitte Auswahl treffen"});
</script>
相关文章：