自定义JQuery在wordpress中不起作用

Question

I have written JQuery for my website search functionality. Its working fine when I am using separate file. But when I included same JQuery file in wordpress its not working as required. My question is how to include this code in wordpress

Code:

$('#search').keyup(function () { 
 var filter = $('#search').val();
  $('.et_pb_row').each(function() {

        $(this).find("h3:not(:contains('" + filter + "'))").parent().hide();
        $(this).find("h3:contains('" + filter + "')").parent().show();
     });
 });

Answer 1

Firstly, ensure you have WordPress loading onto your template.

In your head file, ensure you have this loaded in

<?php wp_enqueue_script("jquery"); ?>

Next, WordPress has to use noConflict mode or use the base jQuery call instead of $ .

Try this

jQuery('#search').keyup(function () { 
    var filter = jQuery('#search').val();
    jQuery('.et_pb_row').each(function() {
        jQuery(this).find("h3:not(:contains('" + filter + "'))").parent().hide();
        jQuery(this).find("h3:contains('" + filter + "')").parent().show();
    });
});

You should also ensure that all your jQuery code is wrapped in the following code:

jQuery(document).ready(function() {
    //code to run here
});

Answer 2

You have to try some trial and error method in fact.It can be because of jquery conflicts.

These are the possibilities coming in mind

1. Try placing your jQUERY code above and below of wp_head();

2. Check if you are using the latest version of jquery file( or check if you use the same jquery file of the working file )

3. Try placing your jQUERY code above and below of jquery file