Prev: ANUSHKA HOT PICTURES
Next: FAQ Topic - What is a native object? (2010-08-02)
From: Christian Kirsch on 1 Aug 2010 08:10
Gilles Ganault schrieb:
> 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:
>
I doubt that many people here are willing to waddle through jQuery-Code...

> ============= 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 :-/

What is the advantage of all this gobbledigook over

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

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

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.

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.

From: David Mark on 1 Aug 2010 08:21
On Aug 1, 8:10 am, Christian Kirsch <c...(a)bru6.de> wrote:
> Gilles Ganault schrieb:> 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:
>
> I doubt that many people here are willing to waddle through jQuery-Code....
>
> > ============= 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 :-/
>
> 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". :)
From: Scott Sauyet on 1 Aug 2010 08:41
On Jul 31, 2:53 pm, Gilles Ganault <nos...(a)nospam.com> wrote:
> 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,

--
Scott
 | 
Pages: 1
Prev: ANUSHKA HOT PICTURES
Next: FAQ Topic - What is a native object? (2010-08-02)