Question

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

<!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>

Answer 1

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

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

将事件委托给父div，如果将id或类分配给父div并使用id或class selector来委托事件，那会更好。

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

Answer 2

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

    });
});

原始js（ie8未考虑）：

window.addEventListener('load', function(){
    document.addEventListener('click', function(e){
        if(e.target.tagName === 'button'){
              alert(e.target.id);
        }
    });
});

Answer 3

“JQuery Create”按钮没有添加按钮，因为你从未调用过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>

Answer 4

这是我的答案：

<!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>

不要太粗鲁，我还在学习......在localhost上测试过;新生成的按钮在单击时会发出警报。

Saludos;）

Answer 5

在文档准备好后调用document.ready函数。

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

要做你想做的事，你必须在创建按钮时绑定监听器，如下所示：

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

2 - 除了你点击的jQuery监听器之外，还要覆盖元素的onclick属性。要以灵活的方式避免这种情况并将它们都调用，请将此添加到您单击侦听器

eval($(this).attr("onclick"));

您可以查看此jsFiddle以查看这些内容。

Answer 6

我认为问题在于你如何绑定.click事件。在jQuery 1.7之前，他们为.bind，.delegate和.live提供了单独的方法。但是随着jQuery 1.7的到来，这些方法被合并以通过将它们全部包含在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 ) {} );

我的猜测是，button绑定后会声明.click无法正常工作的标记。在这种情况下，您必须像实时事件一样实施.on。所以你需要改变的就是绑定调用的方式。

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

希望这有帮助。

使用JQuery创建Button

6 个答案: