jquery2.0后,在页面加载的事件里,动态绑定事件则是用到on方法。大家看一下以下代码段:
$(function () {
var tstr = "";
tstr += "<tr><td><input type='text' ></td>";
tstr += "<td style='vertical-align: middle;'>删除<h2>×</h2></a>";
tstr += "</td></tr>";
$(".guser tbody").append(tstr);
$(".guser tr input").on("click", function () {
alert(111);
});
})
在类名为guser的table input上,并没有绑定到click事件。这是什么原因?
没问题啊吗,你jquery路径导入正确没有?而且2+以上的版本不支持IE8-的。。注意这个问题。要兼容ie8-你要换版本低于2的jquery
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<table class="guser"><tbody></tbody></table>
<script type="text/javascript">
$(function () {
var tstr = "";
tstr += "<tr><td><input type='text' ></td>";
tstr += "<td style='vertical-align: middle;'>删除<h2>×</h2></a>";
tstr += "</td></tr>";
$(".guser tbody").append(tstr);
$(".guser tr input").on("click", function () {
alert(111);
});
})
</script>
试一下下面的代码是否能够正确运行,我测试是正常的。
开头的 $(".guser")这个部分最好是放dom上现在已经有的,把动态生成的放在on的第二个参数。
$(function(){
var tstr = "";
tstr += "<tr><td><input type='text' /></td>";
tstr += "<td style='vertical-align: middle;'>删除<h2>×</h2></a>";
tstr += "</td></tr>";
$(".guser tbody").append(tstr);
$(".guser").on("click", "tr input", function () {
alert(111);
});
})