I can't get the alert to fire. What am I missing? - php

Question

I can't get the alert to fire. What am I missing?
(the code below is inside a WP plugin)
<?php
wp_enqueue_script('jquery');
?>
<script type="text/javascript">
jQuery('#myTest').click(function(){alert('hi');});
</script>
<?php
echo "<div><input type='button' value='Test' id='myTest' /></div>";
?>

Answer 1

The script is processed before the element, so #myTest doesn't exist when you're assigning the handler. Swap them around:
<?php
echo "<div><input type='button' value='Test' id='myTest' /></div>";
?>
<script type="text/javascript">
jQuery('#myTest').click(function(){alert('hi');}));
</script>
Alternatively, you can use live() which allows binding events to elements that don't exist yet:
<script type="text/javascript">
jQuery('#myTest').live("click", function(){alert('hi');}));
</script>
<?php
echo "<div><input type='button' value='Test' id='myTest' /></div>";
?>
Or make use of jQuery's ready() handler, which will fire when all elements have been parsed:
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#myTest').click(function(){alert('hi');}));
});
</script>
<?php
echo "<div><input type='button' value='Test' id='myTest' /></div>";
?>
Note that in the last example, I'm aliasing the jQuery namespace in the $ argument that is passed to the function. This allows you to use $ for jQuery with WordPress instead of typing out jQuery all the time.

Answer 2

You're missing the document.ready handler, like this:
<script type="text/javascript">
jQuery(function() {
jQuery('#myTest').click(function(){alert('hi');});
});
</script>
By wrapping it like this, it'll wait until the element's loaded in the DOM and ready to be found by jQuery('#myTest').

Answer 3

The script executes before the content is loaded. When the script executes it is unable to find an element with an ID of myTest so it just ignores adding the event handler.
Either put the script after the event, or listen for an ( onload | document.ready ) event.

Answer 4

try this in your script tags:
$(document).ready(function() {
$('#myTest').click(function(){alert('hi');});
});