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实例，因此您可以在包含自己的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>

<强>资源：

Bootstrap＆amp; Wordpress - 什么都没发生

2 个答案: