Experiencing some very odd behaviour in WP Admin, specifically on widgets.php. I'm creating a custom widget, and am writing some simple JS. This is the hook I'm using to enqueue my JS:

 * Enqeue the admin-side JS.
function ni_list_products_scripts( $hook ) {
    if( $hook == 'widgets.php' ) {
        wp_enqueue_script( 'list_products_scripts', get_template_directory_uri() . '/assets/js/widget-list-products.js', 'jquery' );
add_action( 'admin_enqueue_scripts', 'ni_list_products_scripts' );

And the actual JS file (simplified just to show the issue):

jQuery(document).ready(function($) {
    $("#ni_list_products_search").on('change', function(e) {

My end goal is to filter a list of posts, based on the text inputs value, but the .change() event doesn't seem to fire at all. I've tried using .change() as well to no avail.

I'm totally stumped. I know the selector is right, and I know the script is being run. In my debugging I tried to do some basic stuff to #ni_list_products_search, and $("#ni_list_products_search").remove(); does nothing as well.

Just so I cover all the bases, the input I'm trying to target: <input class="widefat" id="ni_list_products_search" type="text">.

I have no idea where to go from here. Any help is greatly appreciated!

  • Can you see the script including in the source? Is it the correct URL for the script? Can you run jQuery("#ni_list_products_search").remove(); from the console? – Seamus Leahy Feb 14 '14 at 5:47
  • @SeamusLeahy, the script is included and running, so yes the URL is correct. Running jQuery("#ni_list_products_search").remove(); from the console did work. – sagalbot Feb 14 '14 at 20:21
  • What happens when you run jQuery("#ni_list_products_search").remove(); from the Javascript console? (techrepublic.com/blog/web-designer/…) – Seamus Leahy Feb 15 '14 at 18:56
  • If you add the widget, then reload the page, does it work? You JS will not bind to new widget instances. – Seamus Leahy Feb 15 '14 at 19:17
  • @SeamusLeahy it doesn't work for new or previously placed widgets. – sagalbot Feb 19 '14 at 23:23

try $("selector").live("change", function(){ /Your code here/ });

  • 3
    Please add an explanation to your answer: why could that solve the problem? – fuxia Mar 19 '14 at 4:33
  • .live() is deprecated as of jQuery 1.7, replaced with .on(). This code example is essentially the exact same as what I've already posted. – sagalbot Apr 24 '14 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.