解決使用jQuery采用append添加的元素事件無效的方法 - xiaoxiao2014－IT工程師數位筆記本

文章出處

<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=

文章列表