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.
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>
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());
});
}
});
#btn.Try using the attribute to get the value.
alert($("#btn").attr("value"));
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)
Use the attribute to get the value:
$("#btn").click(function(){
alert($("#btn").attr("value"));
});
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.
e in 1.7+ example does not exist. By the way, why do you use $("#btn").val() instead of $(this).val()?
$(this)this? If someone gives you your phone, do you drop phone on table and start searching it in whole home? Does it make sense?