[newbie] No click() event after update by AJAX?

[Gilles Ganault]

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.

 

[David Mark]

Gilles Ganault schrieb:> Hello


I doubt that many people here are willing to waddle through jQuery-Code....



What is the advantage of all this gobbledigook over

var button = document.getElementById('mybutton');
button.onclick= function() {...};

?

None at all. It's a huge disadvantage in every conceivable way; from
the extra 70K of dubious code required to the creation (and immediate
discarding) of a jQuery object. It's even less concise.

        $("#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'/>";

Always with the XHTML-style markup. Why do beginners always think
that superfluous slash is useful?

In any case, I don't understand why you'd do all this fancy stuff just
to toggle the value of a button when the user clicks on it. A simple
onclick handler is all you need for that.

Yes, it is an outrageous example.

And of course your button "no longer triggers event" if you replace it
by a new DOM element. If you want it to trigger an event, tell it to do so.

Five will get you ten if this was asked in a jQuery forum or on
StackOverflow, the poster would be told to use "Live".

 

[Scott Sauyet]

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:

$("#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});});

This does not simply replace the text of the button. It replaces the
button itself along with the DIV that surrounds it. So the click
handler you had associated with it is no longer tied to anything. You
might look at JQuery's delegate method:

var $myDiv = $("#mydiv");
$mydiv.delegate("#mybutton", "click", function(evt) {
var myval = $("#mybutton").val(); // jQ "attr" is a mess!
$mydiv".load("ajax.php", {value: myval});
});

But as Christian pointed out, this is pretty heavy-weight just to
toggle the text of a button. Can we assume this is either a learning
exercise or a first step of something more complex?

There will be people on this group urging you not to use jQuery.
Listen to them, because they do have many valid points, but don't let
them make up your mind for you.

Good luck,