Add javascript to Wordpress plugin

Question

I registered my Javascript file in my plugin but the functions of click and etc. do not work.

I registered my main plugin file with the action:

function add_scripts_to_plugin()
{
     wp_enqueue_script( 'birthdate_celebrate_js', dirname(__FILE__) . '/includes/assets/js/main.js', array( 'jquery' ));
}
add_action('wp_enqueue_scripts', 'add_scripts_to_plugin');

The Javascript file:

jQuery( function( $ ) {
    $('#birthdate_celebrate_send_mails').on('click', function () {
        console.log('clicked');
    });
});

The plugin loads normally and shows no error in the console or in PHP, but even so the eventListener click is not added to button.

Answer 1

I found the answer in this stack topic in English.

To include the archive with wp_enqueue_script be a plugin, the function shall be used plugin_dir_url and not get_template_directory_uri(), because this function returns a URL that points to the current theme being used.

Resolution:

function birthdate_celebrate_add_interactions_to_plugin()
{
    wp_enqueue_script( 'birthdate_celebrate', plugin_dir_url( __FILE__ ) . 'includes/assets/js/birthdate_celebrate.js', array( 'jquery' ), '1.0');
}
add_action('admin_enqueue_scripts', 'birthdate_celebrate_add_interactions_to_plugin');

Answer 2

I see two things that can potentially give problem there, but nothing guarantees that they are. The first is to use dirname(__FILE__) instead of get_template_directory_uri():

function add_scripts_to_plugin()
{
     wp_enqueue_script( 'birthdate_celebrate_js', get_template_directory_uri() . '/includes/assets/js/main.js', array( 'jquery' ));
}
add_action('wp_enqueue_scripts', 'add_scripts_to_plugin');

The second is to place a click event on an element that is on the page from the page load, and delegate to the button:

jQuery( function( $ ) {
    // troque 'body' por um outro seletor mais próximo, talvez um pai direto do botão que quer alcançar.
    $('body').on('click', '#birthdate_celebrate_send_mails' , function () {
        console.log('clicked');
    });
});

Answer 3

Your code is correct, I did a test on a page only with a button with this id and it worked.

See if at the time you try to attach the event the object already exists, put before an instruction to print the result of $('#birthdate_celebrate_send_mails'):

jQuery( function( $ ) {
    console.log($('#birthdate_celebrate_send_mails'));
    $('#birthdate_celebrate_send_mails').on('click', function () {
        console.log('clicked');
    });
});

Another way to do it, if the object is included later, would be like this:

    $(document).on('click', '#birthdate_celebrate_send_mails', function () {
        console.log('clicked');
    });