Simple Javascript not working in Wordpress / WooCommerce plugin

Question

The code below is for a simple plugin that adds a new tab to the wooCommerce product page (frontend), and then adds a button to that tab. What I want it to do is popup an alert when the button is clicked. This is super simple, I know, but I created it to try and figure out why a more complicated script wasn't working.

So far, the tab exists, and the button exists, but when I click on the button nothing happens. I have checked to make sure the script is actually being loaded, and I have confirmed that it is indeed present in the source code of the page. If I load the javascript filepath from the source code directly in my browser it displays the correct code.

Further, if I make a simple html file with the javascript code and the button (so none of the wordpress stuff) it works perfectly well.

Further, I have added a simple alert command directly to the html output in the php file, and this also works fine.

This has led me to believe the issue relates to the IDs, but I don't know what to do differently.

Here is the php file (minus the plugin header for clarity):

<?php

//runs addScripts
add_action( 'wp_enqueue_scripts', 'addScripts' );

// enqueues jquery and test1.js files. Inspecting html shows these are loaded.test1.js is loaded in footer.
function addScripts(){
    wp_enqueue_script( 'jquery', plugins_url( 'jquery.js', __FILE__ ));
    wp_enqueue_script( 'test1', plugins_url( 'test1.js', __FILE__ ),array('jquery'),1,true);
}

// creates new tab in woocommerce
add_filter( 'woocommerce_product_tabs', 'woocommerce_product_custom_tab' );

// function defining test_tab   
function woocommerce_product_custom_tab($tabs) {
    $tabs['test_tab'] = array(
        'title' => __( 'New Product Tab', 'woocommerce' ),
        'priority' => 50,
        'callback' => 'woo_new_product_tab_content'
    );
    return $tabs;
}

// content of new tab, and where the javascript is supposed to work.        
function woo_new_product_tab_content() {

echo <<<END

<button id="mybutton" type="button">Click Me</button>

<script type="text/javascript" src="test1.js"></script>

<script type="text/javascript">
<!--test1();//--></script>

<script type="text/javascript"> alert('ALERT!') </script>
END;
}
?>

And here is the test1.js containing the javascript function:

function test1(){
    $( "#mybutton" ).click(function( event ) {
        alert ('Hello')
    });
}

Is it possible that #mybutton in test1.js isn't leading the function to the 'mybutton' button in the php/html?

Thanks for your help!

---

Update: I now have a functioning button using the following in the php echo:

<script type="text/javascript"> 
jQuery(document).ready(function($) {
$( "#mybutton" ).click(function( event ) {
alert ('Hello')});
 });
 </script>

But the following doesn't work:

<script type="text/javascript"> 
jQuery(document).ready(function($) {
test1(); });
 </script>

With test1.js as it was before.

---

update 2

So whilst the answer below finally got the code working, the more complex stuff that this was a trial for was failing. I finally got it working (and this is probably not the most elegant solution) by doing the following:

add_action('wp_head', 'DPG_execute_script');

function DPG_execute_script()  {

?>

<script type="text/javascript">
jQuery(document).ready(function($) {

// javascript goes here.

}); 
</script>
<?php

 }

I couldn't get it to work with echo <<

Answer 1

If you are using a jQuery function in wordpress you will have to use it in one of the following ways:

• If you want your code to be executed after the document has been loaded:

   jQuery(document).ready(function($) { // Code here will be executed on document ready. Use $ as normal. }); 

• If your code is to be executed in an anonymous function, make sure you pass jQuery as an argument:

   (function($) { // Your jQuery code goes here. Use $ as normal. })(jQuery); 

EDIT: This is how I would implement the code:

<button id="mybutton" type="button">Click Me</button>

<script type="text/javascript"> 
    jQuery("#mybutton").click(function() {
        alert ('Hello')
        });
</script>

Important: The script has to be called after the button!

Answer 2

Simply use this code (make sure you call jquery first) :

<button id="mybutton" type="button">Click Me</button>

<script>    
$( "#mybutton" ).click(function( event ) {
alert ('Hello');
});
</script>

Successful test : http://jsfiddle.net/k664U/