web-dev-qa-db-fra.com

Simple jQuery Cliquez sur Ne fonctionne pas, bien que le journal de la console reconnaisse la fonction

Chargement d'un dialogue jQuery dans un plugin.

  1. En attente dans les scripts d'administrateur

    function enqueue_settings_scripts_styles($page) {
        wp_enqueue_script (  'my-plugin', 'path/to/the.js', array( 'jquery-ui-dialog' ));
    }
    add_action('admin_enqueue_scripts', enqueue_settings_scripts_styles');
    
  2. Le HTML

    <a style="cursor:pointer" class="cool-button">Click Me</a>
    
  3. Script (the.js)

    (function($) {
      console.log( "ready!" ); // this happens
      var detailsButton = $('a.cool-button');
      console.log(detailsButton.click);
      // this prints out to console:
      // function (a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}
    
    
      detailsButton.click(function(e) {
        alert('i happened'); // never happens
        e.preventDefault();
      });
    })(jQuery);
    

J'ai passé plus d'une heure à essayer de résoudre ce problème. Qu'est-ce que je rate?

1
MikeiLL

Lors de la mise en file d'attente d'un script, vous devez indiquer les dépendances de votre script. Dans votre cas, c'est jQuery.

Mettez votre script en file d'attente de la manière suivante:

wp_enqueue_script (  'my-plugin', 'path/to/the.js', array( 'jquery' ) );

Vous pouvez également vous assurer que votre script IS est chargé dans le pied de page en définissant le dernier argument sur true:

wp_enqueue_script (  'my-plugin', 'path/to/the.js', array( 'jquery' ), null, true);

null serait le numéro de version et true indique que le script doit être chargé dans le pied de page.

2
Jack Johansson