Question

使用jquery ajax我从b.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());
});

问题是每当我点击按钮时警报没有显示。

Answer 1

浏览器执行此行时

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

页面中没有id = btn的元素。所以$("#btn")返回一个空集，实际上没有任何反应。

每次将一个按钮添加到页面时，您都必须调用点击功能。

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

Answer 2

事件处理程序绑定到现有元素。在尝试绑定处理程序时，您的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>

Answer 3

尝试使用该属性获取值。

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

Answer 4

在调用AJAX之前，您的onclick事件已被绑定。我知道它是在代码中的那一部分之后，但是使用AJAX调用并不能保证你按照这个顺序发生所有事情。

您需要在AJAX调用成功之后（以及在将元素添加到DOM中之后）绑定click事件

Answer 5

使用该属性获取value：

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

Answer 6

如果您使用的是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());
});

确保在准备好的文档中添加此代码。

来自php的按钮回声不起作用

6 个答案: