jQuery中on與bind的區別

2021-10-11 09:25:30 字數 2143 閱讀 4548

bind的一般格式:

$

("#id").

bind

("click"

,function()

)

on的一般格式:

$

("#id").

on("click"

,".class"

,function()

)

從寫法上看,on比bind多了乙個對子標籤進行選擇的selector(非必須),這就是它們的區別,下面通過例項進行說明:

name

="p"

>

p_test1p

>

name

="p"

>

p_test2p

>

>

type

="button"

value

="btn"

/>

type

="text"

/>

div>

//p標籤繫結click事件$(

"p")

.bind

("click"

,function()

);//div標籤繫結click事件$(

"div").

on("click"

,function()

);//div標籤下type=button的input標籤繫結click事件$(

"div").

on("click"

,"[type='button']"

,function()

);

情景一:on將子元素事件委託給父元素進行處理

class

="content1"

>

class

="child"

>

div>

div>

class

="content2"

>

class

="child"

>

div>

div>

class

="content3"

>

class

="child"

>

div>

div>

$

(".child").

bind

("click"

,function()

)$(".content1").

on("click"

,".child"

,function()

)

情景二:on為動態新增的元素繫結事件(例1)

class

="content1"

>

123div

>

class

="content2"

>

456div

>

$

(".content1").

addclass

("show-red");

$(".content2").

addclass

("show-yellow");

/*$(".show-red").bind("click",function () )*/$(

".content1").

on("click"

,".show-red"

,function()

)

情景三:on為動態新增的元素繫結事件(例2)

"div"

>

div>

onclick

="add()"

>

buttonbutton

>

$

(function()

)})function

add(

)

jquery中val 和bind 用法

當用於返回值時 該方法返回第乙個匹配元素的 value 屬性的值。當用於設定值時 該方法設定所有匹配元素的 value 屬性的值。注意 val 方法通常與 html 表單元素一起使用。例子 document ready function 在jsp頁面如果在標籤中使用同名的名字,會在頁面造成一些衝突,...

jQuery中bind和live方法的區別

bind和live方法的作用都是為被選元素新增乙個或多個事件處理程式,並規定當這些事件發生是執行的函式 不同點是 通過live方法附加的事件處理程式適用於匹配選擇器的當前及未來元素 比如由指令碼建立的新元素 這是乙個段落。這裡把上面的live換成bind效果是一樣的,不同的是 如 1 2 3jque...

jQuery中bind和live方法的區別

bind和live方法的作用都是為被選元素新增乙個或多個事件處理程式,並規定當這些事件發生是執行的函式 不同點是 通過live方法附加的事件處理程式適用於匹配選擇器的當前及未來元素 比如由指令碼建立的新元素 這是乙個段落。這裡 把上面的live換成bind效果是一樣的,不同的是 如 1 2 3jqu...