我无法使用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>
在此问题的简化示例中,单击"创建"按钮时,将显示动态链接.当您单击没有任何反应时,这些动态链接不像静态链接那样调用警报.
onmethod将第二个参数作为选择器,在该选择器上应该触发您缺少的事件.根元素也应该是包含动态元素的容器.在你的情况下它是#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将附加一个click事件,#dynamicArea并且只要#dynamicArea在事件内部点击任何元素,就会冒泡到#dynamicArea.此时它将尝试查看我们作为第二个参数传递的选择器是否on匹配.如果它匹配则会触发事件,否则如果我们不停止它就不会做任何事情.