Блог

Главная - Вопросы по программированию - Обработчики jQuery не работают в Word Press

Обработчики jQuery не работают в Word Press

#jquery #wordpress

#jquery #wordpress

Вопрос:

** Редактировать — я удалил код из своего заголовочного файла и попробовал инструкции из https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way /

Я добавил этот код в свой файл функций

 function shapeSpace_include_custom_jquery() {

    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);

}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

Я вижу успешный запрос GET в консоли на CDN. Я также попытался изменить ссылку на https://code.jquery.com/jquery-3.5.1.js с официального сайта jquery

У меня есть файл с именем main.js с помощью этого кода —

 (function ($) {
  console.log("working");

  $(".about-text").click(function () {
    alert("test")
  });

})(jQuery);

Отображается «рабочий» журнал консоли, поэтому он знает, что он загружен, но обработчик jQuery для клика этого не делает. Я также пробовал hover (), и это не работает, также пробовал просто —

 $(".about-text).hide()

Это div, который я тестирую —

     <div class="about-text">
        <h2><?php the_title(); ?></h2>
        <h3><?php the_content(); ?></h3>
    </div>

Я также добавил

 
<div id="target">
  Click here
</div>

и

 $( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

(пример из jquery.com сайт), и он не работает.

Что я здесь делаю не так?

Комментарии:

1. есть ли у вас какой-либо блокировщик контента, который блокирует alert() ? попробуйте console.log вместо этого, а также попробуйте с $("body").on("click",".about-text",function(){

2. Пробовал, все еще не работает

3. попробуйте с jQuery(document).ready(function($) { $( "#target" ).click(function() { alert( "Handler for .click() called." ); }); }

4. Это сработало! Спасибо. Вы знаете причину, почему?

5. добавлено в мой ответ 😉

Ответ №1:

в WordPress jQuery загружается в режиме без конфликтов, поэтому вы не можете использовать $ его подобным образом, вместо этого вы можете использовать jQuery, как показано ниже, затем вы можете использовать $ 

 jQuery(document).ready(function($) {  
    $( "#target" ).click(function() {   
       alert( "Handler for .click() called." ); 
    });   
}

или у вас есть другой вариант использования no conflict, например

 var j = jQuery.noConflict();
    j(document).ready(function() {  
        j( "#target" ).click(function() {   
           alert( "Handler for .click() called." ); 
        });   
    }