今天遇到一个诡异的问题,也就是动态生成的html内容元素触发click事件,用on没有生效。苦思不得其解。
原来是没有写好,比如:
$(w).parent('td').siblings('td.operation').html('已试用<p><button class="btn btn-mini">取消</button></p>');这是动态生成的代码。
$('td.operation p ').on('click',' button',function(){...});我这样写就是不对的,要写成这样:
$('td.operation ').on('click','p button',function(){});也就是动态加载的元素不能作为主体来触发事件。
<!DOCTYPE html>
<html>
<head>
<style>
div.m { color:blue; margin:8px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<input type="text" name="you" value="hello "/>
<div class="m"></div>
<script>
$("input").keyup(function () {
var value = $(this).val();
$("div.m").text(value);
}).keyup();
</script>
</body>
</html>
其中这句: $("input[name=you]").keyup(function () {
var value = $(this).val();
$("div.m").text(value);
}).keyup();
可以写为:
$("input[name=you]").keyup(function () {
var value = $(this).val();
$("div.m").text(value);
});
$("input[name=you]").trigger("keyup");