Bootstrap & Wordpress - ничего не происходит

Question

Так что я пытаюсь использовать Bootstrap Modal, и я хочу, чтобы он появился после щелчка (метод 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 пост я не могу заставить его работать! Я добавил файлы JS + CSS из Bootstrap на моем header.php

Что может быть проблема?

Спасибо!

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