解决使用jQuery采用append添加的元素事件无效的方法

时间：2023-01-01 05:21:51
<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").live("click",function(){

    $("p").slideToggle();

  });

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<button>请点击这里</button>

</body>

</html>

但是随着jQuery的版本升级，自从jQuery 1.9及其以上已经无法使用live了，那么没有办法了吗，不是的，对于jQuery1.9版本及其以上可以使用on，其效果等同于live。下面的on的使用方法

<script>

$(document).on("click", ".waiting-save", function () {

　　$(this).html('@T("Saving...")')

　　$(this).attr("disabled", "");

});

</script>

整个代码例子为：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8"/>

</head>

<body>

<div>

   <form action=" " method=" " >

    <div class="list">

        <div class="addList">

            分部：

            <select>

                <option>分部</option>

                <option>分部1</option>

                <option>分部2</option>

            </select>

            数量：<input type="text" value="123"/>

            <!-- <span class="add">添加</span>  -->
             <input type="button" value="添加"  class="add"/>

        </div>

    </div>

    </form>

</div>

</body>

<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>

<script type="text/javascript">

    $(function(){

        //全局变量i

          i=0;

          $(".add").click(function() {

              $(".list").append(function(){

                    return '<div class="delList'+i+'"> 分部： <select><option>分部</option><option>分部1</option><option>分部2</option></select> 数量：<input type="text" value="123"/><input type="button" class="del" value="删除"/> </div>';

              });

              i++;

          });

         $(document).on("click", ".del", function () {

            $(this).parent().remove();

         });

    })

</script>

</html>
注意：
1.button的问题
<input type="button" value="添加"  class="add"/> 
这句不能使用 <button class="add">添加</button>
使用button标签的时候，添加的 delList DIV会闪一下，闪了之后就会消失了，不能显示在页面上。
2.input标签闭合问题。
在编辑页面的时候，要记得标签要闭合，不闭合的话，会出现问题。

参考网址：
http://so.xiaohuihui.net/?a=url&k=6c98d343&u=aHR0cDovL3d3dy5idWJ1a28uY29tL2luZm9kZXRhaWwtNTcwMjgyLmh0bWw=&t=6Kej5Yaz5L2@55SoalF1ZXJ56YeH55SoYXBwZW5k5re75Yqg55qE5YWD57Sg5LqL5Lu25peg5pWI55qE5pa55rOVIA==&s=anF1ZXJ5IGFwcGVuZCDml6DmlYg=
相关文章