CODEWITHSUNDEEP
phpjqueryajax
user2178307
user2178307

Reputation:

button echo from php not functioning

Using jquery ajax I`m calling a data from b.php which is a button.

echo '<button id="btn" value="nice!">Click!</button>';

$.ajax({
    type: "GET",
    url: "b.php",
    dataType: "html",
    success: function(data){
        $("#txt").append(data);
    }
});

$("#btn").click(function(){
    alert($("#btn").val());
});

The problem is whenever I click the button the alert is not showing up.

Upvotes: 1

Views: 652

Answers (6)

VolkerK
VolkerK

Reputation: 96159

Event handlers are bound to existing elements. Your id="btn" element doesn't exist at the time you try to bind the handler.
But you can use an delegate event handler. I.e. you bind the handler to an already existing element and let it "filter out" events for descendants (which are possibly added later).

$("#txt").on( "click", "#btn", function() {
  alert($("#btn").val());
});

Since you're binding the event based on an id and therefore only one such element can exist, this technique might not seem too useful. But it works the same as if you were binding it to a class of elements, e.g.

<!DOCTYPE html >
<html>
    <head>
        <title>...</title>
    </head>
    <body>
        <div id="buttondiv">
        </div>
        <button id="addbutton"></button>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            (function() {
                var btncnt = 0;

                // only binding the event handler once
                // on the existing div wrapping the buttons
                // and "waiting" for click-events on descandant button.somebutton elements
                $("#buttondiv").on("click", "button.somebutton", function() {
                    alert( $(this).val() );
                });

                // and it will fire regardless
                // of how many such buttons are added by this:
                $("#addbutton").click( function() {
                    var btn = $("<button></button>");
                    btn.val(++btncnt);
                    btn.addClass("somebutton");
                    btn.append("click me");
                    $("#buttondiv").append(btn);
                });
                $("#addbutton").append("add button");
            })();
        </script>
    </body>
</html>

Upvotes: 1

Touqeer Shafi
Touqeer Shafi

Reputation: 5274

If you are using jQuery 1.7xxx you have bind that event like this:

$("#btn").live('click',function(e){
    e.preventDefault() //prevent default the event  
    alert($("#btn").val());
});

And if you are doing it greator then 1.7xx version of jQuery use:

$('body').on('#btn',function(){
    e.preventDefault() //prevent default the event  
    alert($("#btn").val());
});

Make sure you add this code in document ready.

Upvotes: 0

pguetschow
pguetschow

Reputation: 5337

Use the attribute to get the value:

$("#btn").click(function(){
   alert($("#btn").attr("value"));
});

Upvotes: 0

CMR
CMR

Reputation: 1416

Your onclick event is being bound before the AJAX is called. I know it is after that section in the code, but with AJAX calls that doesn't guarantee you it's going to all happen in that order.

You would need to bind the click event within the success of the AJAX call (and after your element has been added into the DOM)

Upvotes: 0

0_7734
0_7734

Reputation: 21

Try using the attribute to get the value.

alert($("#btn").attr("value"));

Upvotes: 0

Ahmad
Ahmad

Reputation: 5760

When browser is executing this line

$("#btn").click(function(){

There is no element in the page with id=btn. So $("#btn") returns an empty set and actually nothing happens.

You have to call click function each time that a button is added to the page.

$.ajax({
    type: "GET",
    url: "b.php",
    dataType: "html",
    success: function(data){
        $("#txt").append(data);
        $("#btn").click(function(){
            alert($("#btn").val());
        });
    }
});

Upvotes: 0

Related Questions