jquery2.0 追加到的html的input绑定click事件

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);
    });
})