Question

在下面的例子中

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<a href="#">test</a>
<button id="btn-add">Add</button>
<div id="placeholder">
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $('a').on('click', function () {
            alert('clicked');
        });

        $("#btn-add").on("click", function () {
            $('#placeholder').prepend('<a href=\'#\'>blah2</a>');
        });
    });
</script>
</body>
</html>

如果你点击'添加'然后'blah2'没有任何反应，即使我试图提醒任何锚点击。作为检查，如果你点击'test'，你得到弹出窗口

Answer 1

请改为尝试：

$('body').on("click", "a", function () {
    alert('clicked');
});

Link to fiddle

Answer 2

由于元素是动态生成的，因此您需要使用on()方法的委托或创建文字jQuery对象并添加单击事件。

$('closestParent').on('click', 'a', function(){ ... })

// OR

var $link = $('<a href=\'#\'>blah2</a>').click(function(){ ... })
$link.prependTo('#placeholder')

Answer 3

因为你需要将点击委托给父元素。如果您使用1.7+使用.on，或者如果您使用1.6及更低版本，则可以使用.delegate（）。当dom准备就绪时，该元素不存在，因此您需要将delegate事件发送到父元素。这意味着您可以使用$(document)或使用已存在的任何父元素

$(document).on("click","a", function () {  //<-- this allows for the event to bubble up to the document in this case
        alert('clicked');
});

$(document).delegate("a","click", function () {
        alert('clicked');
});

为什么jQuery没有注册我的<a> click?</a>

3 个答案: