jQuery .change() Event Bubbling in WP Admin

Question

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) {
        console.log('change');
    });
});

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!

Answer 1

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