国产视频app今天有位墨初VIP主題的使用者,給我反饋了一個主題中的BUG。就是主題的評論滑塊在回復的時候,無法滑動(當然這個問題已經修復),回來經過反復的查找,終于確定了,在評論回復自動創建的DIV元素中,無法綁定JQ事件,也就是說js無法監聽到動態創建出來的元素,無法給他們綁定事件。

下面就說一說,如何給動態創建的元素添加綁定事件。

JQ中live()的方法

在JQ1.7版本以前,有個live()方法

live() 方法為被選元素附加一個或多個事件處理程序,并規定當這些事件發生時運行的函數。

注:通過 live() 方法附加的事件處理程序適用于匹配選擇器的當前及未來的元素(比如由腳本創建的新元素)。

語法

$(selector).live(event,data,function)

国产视频appevent:必需。規定添加到元素的一個或多個事件。

data:可選。規定傳遞到該函數的額外數據。

国产视频appfunction:必需。規定當事件發生時運行的函數。

示例代碼

$("button").live("click",function(){
    $("p").slideToggle();
});

由于live()方法在jQuery版本1.7中被廢棄,在版本1.9 中被移除,并以on()方法代替。我們這里不再多說,只是了解一下即可!

JQ中的on()方法

自jQuery版本1.7 起on()方法是bind()、live()和delegate()方法的新的替代品。

語法

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

国产视频appevent:必需。規定要從被選元素移除的一個或多個事件或命名空間。

childSelector:可選。規定只能添加到指定的子元素上的事件處理程序(且不是選擇器本身,比如已廢棄的 delegate() 方法)。

data:可選。規定傳遞到函數的額外數據。

function:可選。規定當事件發生時運行的函數。

注意:使用 on() 方法添加的事件處理程序適用于當前及未來的元素(比如由腳本創建的新元素)

示例代碼

$(document).ready(function(){
    $("p").on("click",function(){
        alert("段落被點擊了。");
    });
});

上面說了那么多,下面切入本文的重點

利于jquery中的on()為新添加的動態元素綁定事件

国产视频app給動態創建的元素添加綁定事件,其實就是利于了冒泡的原理,利用DOM樹中,存在的被創建元素的父親元素或整個DOM樹來,通過適配的方式,來查找創建元素的綁定事件,我們可以通過下面的一個示例代碼來分板一下。

HTML代碼

<div class="mochu_div">
<!--P為動態創建的標簽-->
    <p class="mochu_p">
        這里的P標簽,通過JS動態創建的!我們為P標簽綁定一個事件!
        飛鳥慕魚博客
    </p>
</div>

JQuery代碼

$(".mochu_div").on('click','.mochu_p',function(e){
    // code............飛鳥慕魚博客
    //說明一下,上面的 '.mochu_p' 可以根據你的具體情況進行適配;
    //比如適配ID類:'#divid' ,表單輸入: 'input[type="text"]';
})

jq綁定事件,jQuery事件綁定on(),jQuery給動態添加的元素綁定事件的方法,jq給動態元素綁定事件,jq給未來元素綁定事件

說明一個,這種方法,對現存在的DOM元素節點或是動態創建的節點都有效果

如果還不是很理解,可以通過下面兩種方式的比較來說明一下

$('.class').on("click",function(){……});相當于$('.class').bind("click",function(){……});
$(document).on("click",'.class',function(){……});相當于$('.class').live("click",function(){……});

国产视频app本文當此結束,如果你對關于如何利用JQ給未來(新動態創建)的元素節點綁定事件有著更好的方法,可以在下方留言給我哦,如果本篇文章有不對的地方也請告訴我哦!