From: Gilles Ganault on
Hello

I'm only getting started with JS, AJAX, and jQuery, and for some
reason I don't understand, using the following basic code, the button
no longer triggers the click() event after it's been replaced by
calling a remote PHP script with jQuery's load() AJAX function:

============= index.html
<DIV id="mydiv">
<input type="button" value="StateA" id="mybutton"/>
</DIV>
**********
<script type="text/javascript" src="jquery.js"></script>

<script type='text/javascript'>
$("#mybutton").click(function() {
var myval = $("#mybutton").attr("value");
//This does change button value, but then, button no longer
triggers event :-/
$("#mydiv").load("ajax.php", {value : myval});
});
</script>
============= ajax.php
<?php

$value = $_GET['value'];
$output = ($value == "StateA")? "StateB": "StateA";

print "<input type='button' value='$output' id='mybutton'/>";

?>
=============

Any idea what it going on? BTW, what tools would you recommend for
either Chrome or Firefox to check the DOM after it's been updated by
AJAX?

Thank you for any hint.