jQuery1.9及其以上版本中動態元素on綁定事件無效解決方案

時間 2019-12-09

標籤 jquery1.9 jquery 及其以上版本動態元素綁定事件無效解決方案欄目 JQuery 简体版

原文原文鏈接

jQuery 1.9/2.0/2.1及其以上版本沒法使用live函數了，然而jQuery 1.9及其以上版本提供了on函數來代替。本文講解了jQuery on函數的使用方法，以及在使用jQuery函數中遇到的一些問題。css

$(selector).on(event,childSelector,data,function,map)

各個參數說明以下：html

參數	描述
event	必需。規定要從被選元素移除的一個或多個事件或命名空間。由空格分隔多個事件值。必須是有效的事件。
childSelector	可選。規定只能添加到指定的子元素上的事件處理程序（且不是選擇器自己，好比已廢棄的 delegate() 方法）。
data	可選。規定傳遞到函數的額外數據。
function	可選。規定當事件發生時運行的函數。
map	規定事件映射 ({event:function, event:function, …})，包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。

按照上面的語法下面的例子是能夠實現的jquery

<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("click",function(){
    alert("The paragraph was clicked.");
  });
});
</script>
</head>
<body>
  
<p>Click this paragraph.</p>
  
</body>

可是若是要綁定的on方法是動態加載出來的元素，那麼這樣使用就是沒有用的。看下面的例子：app

<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#div1").click(function(){
    $("<divclass='test'>test</div>").appendTo($("#div1"));
  });
  $(".test").on("click",function(){
    $(".test").css("background-color","pink");
  });
  $("#div2").bind("click",function(){
    $(this).css("background-color","pink");
  });
});
</script>
</head>
<body>
  
<h4style="color:green;">This example demonstrates how to achieve the same effect using on() and bind().</h4>
  
<divid="div1"style="border:1px solid black;">This is some text.
<p>Click to set background color using the <b>on() method</b>.</p>
</div><br>
  
<divid="div2"style="border:1px solid black;">This is some text.
<p>Click to set background color using the <b>bind() method</b>.</p>
</div>
  
</body>
</html>

上面例子中.test元素是動態加載的，可是給它綁定click方法的時候，明明使用了函數

$(".test").css("background-color","pink");

將背景色設爲pink，可是沒有起做用，什麼緣由呢，緣由就在於.test是動態加載的元素，而使用上面的方法不能綁定動態加載元素的事件，修正的方法爲使用下面的代碼代替：this

<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#div1").click(function(){
    $("<divclass='test'>test</div>").appendTo($("#div1"));
  });
  $(document).on("click",".test",function(){//修改爲這樣的寫法
    $(".test").css("background-color","pink");
  });
  $("#div2").bind("click",function(){
    $(this).css("background-color","pink");
  });
});
</script>
</head>
<body>
  
<h4style="color:green;">This example demonstrates how to achieve the same effect using on() and bind().</h4>
  
<divid="div1"style="border:1px solid black;">This is some text.
<p>Click to set background color using the <b>on() method</b>.</p>
</div><br>
  
<divid="div2"style="border:1px solid black;">This is some text.
<p>Click to set background color using the <b>bind() method</b>.</p>
</div>
  
</body>
</html>

究其緣由就在於使用$(document)意義就在於使元素加載完後才執行方法，因此當爲jQuery動態加載的元素綁定on方法的時候，使用$(document)設置代碼腳本在DOM元素加載完成後開始執行。以前一個移動站項目中遇到了這個問題，動態添加選項卡並操做選項卡，就是用文中的$(document).on()綁定來解決的，想起來記憶猶新，從新溫習下；spa