1. 程式人生 > >jQuery 動態生成on的繫結事件

jQuery 動態生成on的繫結事件

該段程式碼實現的是穿梭框:

    // on的繫結事件傳引數
    var clickEven = [
    	{id:"#demo01",class:".class0",list:"#demo02"},
    	{id:"#demo02",class:".class0",list:"#demo01"},
    	{id:"#demo11",class:".class1",list:"#demo12"},
    	{id:"#demo12",class:".class1",list:"#demo11"},
    	{id:"#demo21",class:".class2",list:"#demo22"},
    	{id:"#demo22",class:".class2",list:"#demo21"},
    	{id:"#demo31",class:".class3",list:"#demo32"},
    	{id:"#demo32",class:".class3",list:"#demo31"}
    ];
    for(var  i = 0 ; i < clickEven.length ; i++){
    // 第三個引數{list:clickEven[i].list},是往on的繫結事件內部傳值,只用這樣才能把上面陣列的值傳到方法內部,如果在內部直接用clickEven[i].list取值,是取不出來的!!!!
    	$(document).on("click",clickEven[i].id +" "+clickEven[i].class,{list:clickEven[i].list},function(even){
    		var str = $(this).prop("outerHTML");
    		$(even.data.list).append(str);//從這裡取出第三個引數傳進來的值
    		$(this).remove();
    	})
    }