PHP的按钮回显不起作用


button echo from php not functioning

使用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());
});