jquery on如何給未來元素綁定事件？

Zhuxy 發(fā)布于2019-08-22 11:06 / 2980人閱讀

摘要：我們要想在一個(gè)元素上綁定一個(gè)事件，那么這個(gè)元素必須先存在，也就是綁定事件動(dòng)作前就已有這個(gè)元素。聲明原文來自求索網(wǎng)如何給未來元素綁定事件

我們要想在一個(gè)元素上綁定一個(gè)事件，那么這個(gè)元素必須先存在，也就是綁定事件動(dòng)作前就已有這個(gè)元素。

這是一個(gè)給元素綁定任何事件的前提。

如果按照這種思路走，那么“給未來元素綁定事件”將會是一個(gè)死胡同。

我們跳出問題設(shè)定的思維陷阱，把元素綁在未來元素的父級上，那么這個(gè)問題就迎刃而解了。

demo如下：

html部分代碼


    php
    javascript

js部分代碼

$("button.add").click(function(){
    $("mysql").appendTo("ul.menu");
})

//給li綁定click事件
//記住不要把事件直接綁定在son元素上$(".son").on("click",function(){})
//正確的姿態(tài)：
$(".menu").on("click", ".son", function(){
    alert("正在進(jìn)入...");
})

ok，拿這個(gè)demo嘗試一下，是不是未來添加的幾個(gè)菜單項(xiàng)都被綁定了點(diǎn)擊事件了呢？沒錯(cuò)，jquery on 綁定未來事件就是這么簡單。

聲明原文來自求索網(wǎng):jquery on如何給未來元素綁定事件

云服務(wù)器 GPU云服務(wù)器 jquery綁定事件on jquery預(yù)綁定事件 jquery綁定hover事件 js如何去除事件綁定

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91769.html

相關(guān)文章

A01-jquery操作之：如何獲取動(dòng)態(tài)生成元素（獲取未來元素）

摘要：如何獲取元素列表進(jìn)行遍歷很簡單直接在方法的回調(diào)函數(shù)中獲取動(dòng)態(tài)生成子元素你好啊將子元素加入父元素為子元素注冊事件輸出所有子元素 A01-jquery操作之：如何獲取動(dòng)態(tài)生成元素（獲取未來元素） what 動(dòng)態(tài)生成元素？ html代碼中沒有的元素通過js生成的元素通過模板字符串生成的元素反正就是頁面加載后才生成的元素 why 傳統(tǒng)的方直接使用$(選擇器)無法獲取到該元素...

wangym 2019-08-26 10:42 評論0 收藏0
【JavaScript系列】動(dòng)態(tài)綁定事件方法：(1)jquery的on方法；(2)html元素綁定

摘要：提示如需移除事件處理程序，請使用方法。說明和綁定的點(diǎn)擊事件被的事件覆蓋。分析不同的綁定方式執(zhí)行順序?qū)傩栽厥录录Ｔ亟壎ㄊ录h除按鈕。屬性綁定事件動(dòng)態(tài)綁定事件方法的方法的屬性綁定。一、動(dòng)態(tài)監(jiān)聽加載對象當(dāng)使用js或jQuery動(dòng)態(tài)創(chuàng)建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監(jiān)聽事件...

young.li 2019-08-26 10:20 評論0 收藏0
jQuery動(dòng)畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。將整個(gè)文件放至項(xiàng)目的任意目錄不要移動(dòng)其文件結(jié)構(gòu)，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。on()方法...

MkkHou 2019-08-29 16:16 評論0 收藏0
jQuery動(dòng)畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。將整個(gè)文件放至項(xiàng)目的任意目錄不要移動(dòng)其文件結(jié)構(gòu)，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。on()方法...

ssshooter 2019-08-23 10:40 評論0 收藏0
jQuery動(dòng)畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。將整個(gè)文件放至項(xiàng)目的任意目錄不要移動(dòng)其文件結(jié)構(gòu)，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。on()方法...

joyvw 2019-08-02 11:08 評論0 收藏0