Question

我无法使用1.7来获取新的.on点击工作。

对于动态创建的链接，例如通过单击“创建”按钮生成的链接，这些链接需要与DOM中的静态链接相同的单击功能。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script type="text/javascript">

function createDivs(){
content = '<div class="tile-button"><a class="tile-action" href="#" rel="1234" alt="Open">Dynamic Link</a></div>';
$(content).appendTo("#dynamicArea");
$('.tile-action').bind('click',function(){});

}

$(document).ready(function(){
    $('#createButton').on("click", createDivs);

    $('#destroyButton').on("click", function(event){
        $("#dynamicArea").html("");
    });

    $('.tile-action').on("click", function(event){
            var linkalt = $(this).attr("alt");
            var linkrel = $(this).attr("rel");
            alert(linkalt + " " + linkrel);
            return false;
   });
});     
</script>
</head>
<body>
<button id="createButton">CREATE</button> <button id="destroyButton">Destroy :(</button>
<div id="dynamicArea"></div>

<br>
<a class="tile-action" href="#" rel="1234" alt="Open">Link</a><!-- works -->
</body>
</html>

在我的问题的简化示例中，当您单击“创建”按钮时，将显示动态链接。当您单击没有任何反应时，这些动态链接不像静态链接那样调用警报。

Answer 1

on方法将第二个参数作为选择器，在该选择器上应该触发您缺少的事件。根元素也应该是包含动态元素的容器。在您的情况下，它是#dynamicArea。试试这个。

   $("#dynamicArea").on("click", ".tile-action", function(event){
            var linkalt = $(this).attr("alt");
            var linkrel = $(this).attr("rel");
            alert(linkalt + " " + linkrel);
            return false;
   });

您应该了解on的工作原理。我们正在选择#dynamicArea元素并使用on方法传递选择器.tile-action。 jQuery会在#dynamicArea上附加点击事件，只要在#dynamicArea内点击任何元素，该事件就会冒泡到#dynamicArea。此时它将尝试查看我们作为on的第二个参数传递的选择器是否匹配。如果它匹配，那么它会触发事件，否则如果我们不停止它就不会做任何事情只是冒泡事件。

Jquery Rebind单击使用新的.on（）而不是.live

1 个答案: