1

我有这个页面：

<html>
<head></head>
<body>

<div id="elem"></div>
<button id="addElem">Add Element</button>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {

        //add element to elem div
        $("#addElem").click(function () {
            $("#elem").append('<a id="test" href="#">this is a test</a><br />');
        });

        //remove added elements on click event
        $("#test").on("click", function(){
            alert(12);
        });

    });
</script>

</body>
</html>

它正在做的是添加一个链接，我希望能够单击添加的链接并显示一条警报消息，但警报不起作用。我错过了什么？

4

3 回答 3

5

将其更改为...

$("#elem").on("click", "#test", function(){
        alert(12);
});

jQuery博客对此有很好的解释。

$(elements).on( events [, selector] [, data] , handler );

当提供选择器时，.on() 类似于 .delegate()，因为它附加了一个 >delegated 事件处理程序，由选择器过滤。当省略选择器或null> null>时，呼叫就像.bind（）。有一种模棱两可的情况：如果数据参数是一个字符串，>您必须提供一个选择器字符串或空值，以免数据被误认为是一个>选择器。为数据传递一个对象，您将永远不必担心特殊情况。

于 2013-05-01T20:56:18.843 回答
1

您没有活动的锚点。由于您没有其他包装器，因此将文档添加到其中：

$(document).on("click", "#test", function(){
    alert(12);
});

注意：这仅适用于第一次单击，因为您将添加多个重复的 ID。

更好的方法：

$("#addElem").click(function () {
    $("#elem").append('<a class="test" href="#">this is a test</a><br />');
});
$(document).on("click", ".test", function(){
    alert(12);
});
于 2013-05-01T20:59:32.913 回答
0

您可以在创建时将函数附加到创建的元素：

$("#elem").append($('<a>', {
  id: "test.
  href: "#",
  text: "this is a test",
  click: function(e){
    e.preventDefault();
    alert(12);
  })
).append($("<br>"));
于 2013-05-01T21:04:01.227 回答