Javascript 使用JQuery创建按钮_Javascript_Jquery

Javascript 使用JQuery创建按钮

javascript jquery

Javascript 使用JQuery创建按钮,javascript,jquery,Javascript,Jquery,谁错了。我将创建两个按钮，一个是html，另一个是jQuery。当我单击“HTML创建”时，会显示消息并创建一个按钮。当我单击“jQuery创建”时，会显示消息。但当我单击消息中新创建的“我的按钮”时，消息中的“我的按钮”按钮不会显示 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <

谁错了。我将创建两个按钮，一个是html，另一个是jQuery。当我单击“HTML创建”时，会显示消息并创建一个按钮。当我单击“jQuery创建”时，会显示消息。但当我单击消息中新创建的“我的按钮”时，消息中的“我的按钮”按钮不会显示

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
    function appendText() {
      var button = $("<button>My Button</button>");
      $('p').append(button);
    }
    $(document).ready(function () {
        $("button").click(function () {
            alert($(this).attr("id"));

        });
    });
</script>
</head>
<body>

<p>This is a paragraph.<br></p>
<div>
   <button onclick="appendText()">HTML creat</button>
</div>
<script>
    var button = $("<button>JQuery creat</button>");
    $('div').append(button);
</script>

</body>
</html>


函数appendText（）{
var按钮=$（“我的按钮”）；
$（'p'）。追加（按钮）；
}
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
警报（$（this.attr（“id”））；
});
});
这是一段。

HTML创建
var按钮=$（“JQuery创建”）；
$（'div'）。追加（按钮）；

您必须使用动态创建的元素来附加事件。您可以将事件委托给按钮或文档的最近父级

$(document).ready(function () {
     $(document).on("click", "button", function () {
        alert($(this).attr("id"));    
     });
});

将事件委托给父div，最好将id或类分配给父div，并使用id或类选择器委托事件

$('div').ready(function () {
     $(document).on("click", "button", function () {
        alert($(this).attr("id"));    
     });
});

原始js（未考虑ie8）：

“JQuery创建”按钮没有添加按钮，因为您从未调用过appendText（）函数……我已从“我的按钮”按钮中删除了直接调用，并将appendText调用添加到单击绑定函数中

请尝试以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
    function appendText() {
      var button = $("<button>My Button</button>");
      $('p').append(button);
    }
    $(document).ready(function () {
        $("button").click(function () {
            alert($(this).attr("id"));
            appendText();

        });
    });
</script>
</head>
<body>

<p>This is a paragraph.<br></p>
<div>
   <button>HTML create</button>
</div>
<script>
    var button = $("<button>JQuery create</button>");
    $('div').append(button);
</script>

</body>


函数appendText（）{
var按钮=$（“我的按钮”）；
$（'p'）。追加（按钮）；
}
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
警报（$（this.attr（“id”））；
appendText（）；
});
});
这是一段。

HTML创建
var按钮=$（“JQuery创建”）；
$（'div'）。追加（按钮）；

这是我的答案：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
    function appendText() {
      var button = $("<button>My Button</button>");
      $('p').append(button);
    }
    $(document).ready(function () {
        $(document).on("click", "button", function () {
        alert($(this).attr("id"));    
 });
    });
</script>
</head>
<body>

<p>This is a paragraph.<br></p>
<div id="myDiv">
   <button onclick="appendText()">HTML creat</button>
</div>
<script>
    var button = $("<button onclick='appendText()'>JQuery creat</button>");
    $('#myDiv').append(button);

</script>

</body>
</html>


函数appendText（）{
var按钮=$（“我的按钮”）；
$（'p'）。追加（按钮）；
}
$（文档）.ready（函数（）{
$（文档）。在（“单击”、“按钮”上，函数（）{
警报（$（this.attr（“id”））；
});
});
这是一段。

HTML创建
var按钮=$（“JQuery创建”）；
$（'#myDiv'）。追加（按钮）；

别这么粗鲁，我还在学习…在本地主机上测试；新生成的按钮在单击时发出警报

Saludos；）

文档准备就绪后调用document.ready函数

1-文档完成后，没有“我的按钮”按钮，因此它们都不会与事件侦听器绑定

要执行所需操作，必须在创建按钮时绑定侦听器，如下所示：

var button = $("<button>My Button</button>");
button.click(function () {
     alert($(this).attr("id"));
});
$('p').append(button);

你可以检查这个来查看这些东西是否正常工作。

我认为问题在于如何绑定

。单击事件。在jQuery 1.7之前，它们有单独的、bind
、、delegate
和.live
方法。但是随着jQuery 1.7的出现，这些方法被合并，以简化事情，将它们全部包含在一起r 1方法.on
。但由于文档不太清楚，人们不理解.on
方法。.on
提供了上述3种不推荐的方法的功能，但这取决于如何使用.on
方法。以下是一个示例：
// Bind
$( "button" ).on( "click", function( e ) {} ); 

// Live
$( document ).on( "click", "button", function( e ) {} );

// Delegate
$( "body" ).on( "click", "button", function( e ) {} );

我的猜测是，按钮
的标记在您的之后被声明为无效。单击
是绑定。在这种情况下，您必须像对实时事件那样在
上实现。因此，您需要更改的是绑定调用的方式
$( document ).on( "click", "button", function () {
        //Do Something
});

希望这能有所帮助。
更喜欢在@TejaKantamneni上使用委派而不是@TejaKantamneni。只有在-1.7
上时，才应该使用委派。在上取代。委派自1.7
@TejaKantamneni OP正在使用jQuery版本1.9和jQuery 1.7.delegate（）
已被.on（）
方法所取代。请解释您所做的更改及其原因。我将Jquery create按钮附加到div id=“myDiv”中，并添加了onclick函数调用appendText…。在appendText函数中，我通过这段代码$（文档）更改按钮。on（“click”，“button”，函数（）{alert（$（this.attr（“id”）；}）；..文档。我是西班牙人，很抱歉错过了解释部分；）新的按钮没有附加侦听器，那么应该怎么办？
eval($(this).attr("onclick"));

// Bind
$( "button" ).on( "click", function( e ) {} ); 

// Live
$( document ).on( "click", "button", function( e ) {} );

// Delegate
$( "body" ).on( "click", "button", function( e ) {} );

$( document ).on( "click", "button", function () {
        //Do Something
});