Bootstrap 和 Wordpress - 没有任何反应

Question

所以我正在尝试使用 Bootstrap 模式，我希望它在单击后出现（onclick 方法）。

我现在有这个

    $(document).ready(function(){
      
       $("#cancelPObtn").on("click", function(){ $("#error-dialog").modal();});
          
    });

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>


<!-- BELOW ON MY WORDPRESS POST   -->
<a href="#" class="btn btn-danger" id="cancelPObtn" data-toggle="modal" href="#error-dialog">Yes, cancel it</a>
 <div class="modal hide fade" id="error-dialog">
   <div class="modal-header">
        <a class="close" data-dismiss="modal">x</a>
        <h3>Cancel Purchase Order?</h3>
   </div>
   <div class="modal-body">
   </div>
   <div class="modal-footer">
       <a href="#" class="btn btn-danger btn-modal btn-cancel"  data-dismiss="modal">Yes, cancel it</a>
       <a href="#" class="btn" data-dismiss="modal">Nevermind</a>
   </div>
 </div>
<!-- I HAVE THE JAVASCRIPT ON MY POST TOO, USING <script type="text/javascript"> -->

所以，它似乎无处不在，但在我的 Wordpress 帖子中，我无法让它工作！我在 header.php 中添加了来自 Bootstrap 的 JS + CSS 文件

这可能是什么问题？

谢谢！

Answer 1

您应该阅读enqueuing scripts and styles in WordPress。 WordPress 有自己的方式来包含您应该熟悉的脚本文件和样式表。很多时候，最终发生的情况是文件没有正确包含，或者顺序错误，或者没有他们可能需要的依赖项。强烈建议不要将链接直接添加到 header.php。

Answer 2

除了使用上面推荐的wp_enqueue_script 之外，我会确保您编写的 jQuery 不会发生冲突，因为 WordPress 插件有时会与它们自己的 JavaScript 库捆绑在一起，这可能会导致问题。

见下文：

<script type="text/javascript">
  jQuery(function($) {
    $('#cancelPObtn').click(function() {
      $('#error-dialog').modal();
    });
  }
</script>

另外，WordPress 可能正在调用它自己的 jQuery 实例，因此您可以在包含您自己的实例之前使用window.jQuery 进行测试，如下所示：

<script type="text/javascript">
  window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.7.2.min.js"><\/script>');
</script>

资源：

• jQuery.noConflict()
• HTML5 Boilerplate