使用jquery ajax,我从b.p php调用数据,这是一个按钮。
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());
});
问题是,每当我点击按钮的警告不显示。
事件处理程序绑定到现有元素。当您尝试绑定处理程序时,id="btn"元素不存在。
但您可以使用委托事件处理程序。也就是说,你将处理程序绑定到一个已经存在的元素,并让它"过滤掉"后代(可能稍后添加)的事件。
$("#txt").on( "click", "#btn", function() {
alert($("#btn").val());
});
由于您是基于id绑定事件的,因此只能存在一个这样的元素,因此该技术可能看起来不太有用。但它的工作原理与将它绑定到一个元素类(例如
)是一样的。<!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>
当浏览器执行这一行
$("#btn").click(function(){
页面中没有id=btn的元素。因此,$("#btn")
返回一个空集合,实际上什么也没有发生。
你必须调用click函数,每次一个按钮被添加到页面。
$.ajax({
type: "GET",
url: "b.php",
dataType: "html",
success: function(data){
$("#txt").append(data);
$("#btn").click(function(){
alert($("#btn").val());
});
}
});
尝试使用该属性获取值。
alert($("#btn").attr("value"));
在调用AJAX之前绑定onclick事件。我知道它是在代码的那个部分之后,但是对于AJAX调用,这并不能保证它会按这个顺序发生。
您需要在AJAX调用成功时绑定click事件(并且在您的元素被添加到DOM之后)
使用该属性获取value
:
$("#btn").click(function(){
alert($("#btn").attr("value"));
});
如果你使用的是jQuery 1.7xxx,你可以这样绑定事件:
$("#btn").live('click',function(e){
e.preventDefault() //prevent default the event
alert($("#btn").val());
});
如果你想做的更好,那么1.7xx版本的jQuery使用:
$('body').on('#btn',function(){
e.preventDefault() //prevent default the event
alert($("#btn").val());
});