简体   繁体   中英

Why doesn't the jQuery script connect to the button inside a wordpress plugin?

I am trying to make a media uploader in my widget admin page. I have 3 files:

foo_widget_class.php (which holds my upload button)
fileuploader.admin.js (wich handles my button clicks)
foo_widget.php   (wich registers my widget and scripts)

foo_widget_class.php:

  class Foo_Widget extends WP_Widget {
    // a lot of code that works
   public function form( $instance ) {
      <input
      id="upload-button3"
      class="button buttons-secondary"
      type="button"
      value="Upload button">
    //rest of the class

fileuploader.admin.js:

jQuery(document).ready(function(){
  // This alert fires so the javascript is loaded properly.
  alert("test");

       jQuery( "#upload-button3" ).click(function() {
         alert( "Handler for .click() called." );
       });

 });

foo_widget.php:

/*
Plugin Name: Foo widget
Plugin URI:  http://www.foo.nl
Description: This is a food widget
Version: 1.0
Author: Jeffrey Rocks
Author URI:  http://www.jeffrey.com
Licence: none
*/
function enqueue_media_uploader()
{
    wp_register_script('mediauploaderScript', plugins_url().'/foo_widget/js/fileuploader.admin.js', array('jquery'),'1.0.0','all');
    // at the end of the wp_registerscript instead of 'all'  i also tried
    // false and true. Both did nothing.
    wp_enqueue_script('mediauploaderScript');
    wp_enqueue_media();
}

include(plugin_dir_path(__FILE__).'foo_widget_class.php');

  // register Foo_Widget widget
function register_foo_widget() {
    register_widget( 'Foo_Widget' );
}

add_action( 'widgets_init', 'register_foo_widget' );
add_action("admin_enqueue_scripts", "enqueue_media_uploader");


?>

So the JS loads but then i press the button nothing happens. The console also does not output any error. Does anyone have a clue why this is ?

UPDATE:

window.onload = function(){
       //var mediaUploader;
       document.getElementById("upload-button3").onclick = function() {

              alert( "Handler for .click() called." );
       };
       alert(document.getElementById("upload-button3"));

I have tried javascript instead of jQuery. The alert fires, but the button does not work. The alert says:

[object HTMLInputElement]

You're passing an invalid argument to wp_register_script() , looks like you've copied and pasted the wp_register_style() version and not updated it correctly. It should be the following with $in_footer set to true.

wp_register_script('mediauploaderScript', plugins_url().'/foo_widget/js/fileuploader.admin.js', array('jquery'),'1.0.0',true);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM