2012年10月31日 星期三

[jQuery]神奇的on事件,重新指定事件給元素(ex:按鈕)

我遇到一個問題，當元素被動態新增後，即使名稱例如(class)取得一樣，
但這個class名稱的事件就是不執行!
原因就是因為這個元素是動態新增的，事件沒有被綁定在元素上面，
於是我就上PTT問問題,被前輩指點了on這個事件
這個事件真的是簡潔有力，幾乎不會改太多就可以解決了
先來看看on事件解決問題demo
從上面那個網頁看的出來，on事件能增能刪，一般的click事件後來新增的不能刪
所以on事件做的就是重新指派事件給元素



怕以後忘記，先來輩份一下程式碼
原本:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;"/>
<title>怎麼辦?</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="include_js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 //先賦與圖片函數
 change_bg('img1');
 change_bg('img2');
 //把點的圖片顯示在block裡面
 $('.img').click(function(){
  var img=document.createElement('img');
  img.setAttribute('src',$(this).attr('src'));
  img.setAttribute('class',$(this).attr('data'));
  $('#inner').html(img);
  change_bg($(this).attr('data'));
 });
});
//函數
function change_bg(id){
 $('.'+id).click(function(){
  alert('.'+id);
 });
}
//觸發BLOCK
$(function(){
 $('.img').click(function(){   
   $.blockUI({    
     message: $('#block'),    //要彈跳出的元素box
     css: {    //弹出元素的CSS属性
     marginLeft: '-250px',
     marginTop: '-300px',
     height:'auto',
     overflow:'auto',
     width:'400px',
     height:'400px',
    }
   });
  $('.blockOverlay').attr('title','單擊關閉').click($.unblockUI);   //遮罩層屬性的設置以及當鼠標單擊遮罩層可以關閉彈出層
  $('#shop-btn1').click($.unblockUI);  //也可以自定義一個關閉按鈕來關閉彈出層
 });
});
</script>
</head>
<body>
<img src="img/line.jpg" class="img img1" data="img1"/>
<img src="img/line2.jpg" class="img img2" data="img2" />
<div>
 <p>先點↑,會alert一次,block跳出裡面的圖也可以alert,圖層關掉後,再點會alert兩次</p>
 
 <p>裡面的依然也可以alert,但外面的會一直+1次...要怎麼寫可以解決這個問題</p>
 <p>我只想要外面跟裡面alert各一次就好</p>
 <p>註:</p>
 <p>class='img'是觸發block</p>
 <p>原本是要做切換背景的,因為速度太快會看不出來問題點,所以用alert代替</p>
 <p>先謝謝試著來幫我解決問題的人</p>
</div>
<div id="block" style="display:none;">
 <div id="inner"></div>
</div>
</body>
</html>


加上on事件解決問題:
1.首先改:

//函數
function change_bg(id){
 $(document).on('click','.'+id,function(event){
  alert('.'+id);
 });
}

2.刪除:

change_bg($(this).attr('data'));


修改後的完整程式碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;"/>
<title>怎麼辦?</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="include_js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 //先賦與圖片函數
 change_bg('img1');
 change_bg('img2');
 //把點的圖片顯示在block裡面
 $('.img').click(function(){
  var img=document.createElement('img');
  img.setAttribute('src',$(this).attr('src'));
  img.setAttribute('class',$(this).attr('data'));
  $('#inner').html(img);
 });
});
//函數
function change_bg(id){
 $(document).on('click','.'+id,function(event){
  alert('.'+id);
 });
}
//觸發BLOCK
$(function(){
 $('.img').click(function(){   
   $.blockUI({    
     message: $('#block'),    //要彈跳出的元素box
     css: {    //弹出元素的CSS属性
     marginLeft: '-250px',
     marginTop: '-300px',
     height:'auto',
     overflow:'auto',
     width:'400px',
     height:'400px',
    }
   });
  $('.blockOverlay').attr('title','單擊關閉').click($.unblockUI);   //遮罩層屬性的設置以及當鼠標單擊遮罩層可以關閉彈出層
  $('#shop-btn1').click($.unblockUI);  //也可以自定義一個關閉按鈕來關閉彈出層
 });
});
</script>
</head>
<body>
<img src="img/line.jpg" class="img img1" data="img1"/>
<img src="img/line2.jpg" class="img img2" data="img2" />
<div>
 <p>先點↑,會alert一次,block跳出裡面的圖也可以alert,圖層關掉後,再點會alert兩次</p>
 
 <p>裡面的依然也可以alert,但外面的會一直+1次...要怎麼寫可以解決這個問題</p>
 <p>我只想要外面跟裡面alert各一次就好</p>
 <p>註:</p>
 <p>class='img'是觸發block</p>
 <p>原本是要做切換背景的,因為速度太快會看不出來問題點,所以用alert代替</p>
 <p>先謝謝試著來幫我解決問題的人</p>
</div>
<div id="block" style="display:none;">
 <div id="inner"></div>
</div>
</body>
</html>



張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)