Re: [問題] jquery attr onclick IE7 & 8
屋 其實我也被打過臉 說真的出來說嘴只是想賺文章數這樣
※ 引述《sk1765 (鼎玉鉉)》之銘言：
: ※ 引述《gaekeamql (芋頭)》之銘言：
: : 問一下
: : <input type="button" id=1 onclick="alert('001122');" value="alert">
: : <input type="button" onclick="$('#1').attr('onclick','');" value="C">
: : <input type="button" onclick="$('#1').attr('onclick','alert(\'334455\');');"
: : value="RE">
: : 此動作在OPREA OK 但是在IE 清除候 再輸入
: : $('#1').attr('onclick','alert(\'001122\');'); 卻是沒反應的
: : 但是 是有把 oncilck="alert('334455');" 寫進去 但是不會動作
: attr()這個方法 應該是用W3C DOM的屬性方法 setAttribute()寫成的
: 在ppk on Javascript一書第8-G節 有詳細的警告 我把它節錄如下:
: ------------------------------------------------------------
: 很多HTML標籤用特定的屬性去保存行內樣式(inline style)和
: 行內事件處理常式(inline event handler)如 onclick,onkeydown等
: 在IE中,這些屬性不能透過getAttribute()和setAttribute()來讀寫;
: 事實上,如果你嘗試這麼做你會遇到怪異的bug
: 解決的辦法是使用Javascript屬性(Javascript property)
: style,onclick,onkeydown等來讀寫這些屬性
: 為了完全明白這一點,先來探討 HTML屬性(HTML attributes) 和
: javascript 屬性(javascript property)有何區別
: 至於 HTML屬性(HTML attributes) 和 javascript 屬性(javascript property)
: 以及屬性映射 我就不打了
: 麻煩請自行參閱ppk on Javascript中文版8-G 圖書館就有
: 全部打字太累了把 讀寫屬性的最佳方式 看完你就會了解啦
: ------------------------------------------------------------
以上應該是沒錯 (吧)
: 以下是解答
: <input type="button" id="id1" onclick="alert('001122');" value="alert">
: <input type="button" onclick="$('#id1').onclick=function(){};" value="C">
: <input type="button" onclick="$('#id1').onclick=function() {
: alert('334455'); }" "value="RE">
這裡取出來的是jQuery物件 不能直接套上.onclick屬性
很多很方便取出HTML物件的framework都會直接包成一個特定的Object
因為你不可能在HTML Node上新增如.attr()等的屬性、函式
所以jQuery就將他打包成jQuery物件 使它可以支援一堆功能
然而有時總是會遇到必須取得原始Node的情況
這時只要把它當作一個陣列 也就是jQuery把match到的所有node都存入這個陣列中
所以要取得第一項就是$(selector)[0]這樣
不過這邊稱他為陣列也不太對 應該說是物件 或說關聯陣列
javascript在這邊本來就是有著複雜的關係
jQuery本身程式碼 因為小弟才疏學淺沒有研究
所以也不知道到底是哪種 不過應該是物件沒錯...
所以這邊正確寫法是$('#id1')[0].onclick=function(){};
如果很不幸的 match到不只一個 而且必須每個元件都要執行後面的動作
那就剛好可以呼叫jQuery內建的.each()函式
$(selector).each(function(i, obj) {
...
傳進來的obj就是原始的Node 不是jQuery物件 所以可以直接呼叫.onclick屬性
i是代表第幾項
)
: 不用famework直接寫如下
: <input type="button" id="id1" onclick="alert('001122');" value="alert">
: <input type="button" onclick="document.getElementById('id1').
: onclick=function() {};" value="set onclick null">
: <input type="button" onclick="document.getElementById('id1').
: onclick=function() { alert('334455'); }" value="set new onclick">
: 也就是直接用Javascript property映射就好啦
: 不能用W3C的方法
: 在inline event handler裏寫 匿名函式要注意會形成closure的效果 請小心使用
: <input id="btn1" type="button" onclick="document.getElementById('id1').
: onclick=function () {
: alert('334455');
: }"
: value="set new onclick">
拍謝 這裡我也看不懂...
: 翻回傳統註冊法就會變成
: var x = document.getElementById('btn1');
: x.onclick = function () {
: document.getElementById('id1').onclick = function () {
: alert('334455');
: }
其實這樣跟行內註冊沒啥差耶... 只有美醜的差別而已
正確來說應該呼叫W3C的addEventListener
然後要刪掉就要呼叫removeEventListener
當然匿名函式要怎麼刪掉是個問題
所以應該這樣寫
var obj = document.getElementById('id'),
f = function () { alert('test'); };
obj.addEventListener('click', f, true);//第三個參數是要不要觸發上一層Node的事件
obj.removeEventListener('click', f, true);
範例: http://jsfiddle.net/5DgfQ/1/
忘了說...這裡有瀏覽器相容性問題 至於是哪款..大家都知道我就不搬出來鞭了
: }
: --------------------------------------------
: 另外在jQuery中使用
: $('#id1')[0].click(function(){
: alert('334455');
: });
: $('#id1')[0].bind('click', function(){
: alert('334455');
: });
都說將元素取出陣列就不是jQuery物件了 當然無法呼叫.click()或.bind()
: 這些都是利用進階模式 註冊事件
: 也就是透過addEventListener 和 attachEvent完成的
: 這兩者的第一個參數都是事件名稱繫結 事件名稱在javascript中和
: javascript property的使用又不相同 利用這兩者具有附加的效果而非取代效果
: 所以在取消時 必須用 unclick ,unbind 否則新的click只是附加動作
: 同時利用進階模式來取消 無法移除傳統註冊以及行內註冊事件
: <input type="button" id="id1" onclick="alert('001122');" value="alert">
: <input type="button" onclick="$('#id1')[0].unclick();" value="C"> //->不生效?
阿又沒有unclick可以讓你叫...
應該要用unbind
jQuery API Refrence:http://api.jquery.com/unbind/
用法差不多同上
範例: http://jsfiddle.net/5DgfQ/2/
不過對於onclick行內註冊綁上去的function 是不能透過.unbind()去掉的
至少我剛剛試是這樣
: <input type="button" onclick="$('#id1')[0].click(function(){alert('334455');});"
: value="RE"> //->無法附加event handler?
: <input type="button" onclick="$('#id1')[0].click(function(){});" value="C">
: 應該是不行的 因為他是附加動作不是覆蓋動作
: 同時在jQuery中使用 $('#id1')[0].click(); 很容易讓人迷惘
: 因為在javascript中 他明明是 事件模擬(event simulation)
: 但是到了Jquery中變成繫結方法
: 所以如果不傳參數 是否就是事件模擬
: 而他的事件模擬 是否有修正javascript中只對表單欄位動作的問題則不確定
: 結論 行內註冊建議還是用javascript property mapping的方式來取代原來的handler
--
→
12/11 19:59,
12/11 19:59
→
12/11 19:59,
12/11 19:59
→
12/11 19:59,
12/11 19:59
→
12/11 20:00,
12/11 20:00
推
12/11 20:01,
12/11 20:01
→
12/11 20:01,
12/11 20:01
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.116.108.169
addEventListener後面註解打錯了 應為第三個不是第二個...
※ 編輯: s25g5d4 來自: 59.116.108.169 (01/29 22:26)
另外說明一下為甚麼不能寫obj.onclick = f(a,b);
當瀏覽器讀取到f時他會認得他是一個function
之後接上()造成他被觸發(執行) 所以到那邊不管三七二十一都會跑一次
然後勒? onclick綁上去的將會是f(a,b)的傳回值
如果很不幸的 傳回的是null 那就是onclick沒有綁任何東西上去
一個簡單的範例就是
var f=function () {
alert('test');
return function () {alert('test2');};
};
obj.onclick = f();
obj2.onclick = f;
http://jsfiddle.net/5DgfQ/3/
※ 編輯: s25g5d4 來自: 59.116.108.169 (01/29 22:34)
※ 編輯: s25g5d4 來自: 59.116.108.169 (01/29 22:44)
夭壽...each的參數寫反了
※ 編輯: s25g5d4 來自: 59.116.108.169 (01/30 00:24)
討論串 (同標題文章)
完整討論串 (本文為第 4 之 7 篇)：
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
33
68