Re: [問題] jquery attr onclick IE7 & 8

看板Ajax作者sk1765 (鼎玉鉉)時間15年前 (2011/01/29 13:34)推噓1(1推 0噓 41→)

留言42則, 3人參與討論串3/7 (看更多)

※ 引述《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')[0].onclick=function(){};" value="C"> <input type="button" onclick="$('#id1')[0].onclick=function() { alert('334455'); }" "value="RE"> http://jsfiddle.net/6n4sr/4/ 不用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"> http://jsfiddle.net/6n4sr/5/ 也就是直接用Javascript property映射就好啦不能用W3C的方法 -------------------------------------------- 另外在jQuery中使用 $('#id1').click(function(){ alert('334455'); }); $('#id1').bind('click', function(){ alert('334455'); }); 這些都是利用進階模式註冊事件也就是透過addEventListener 和 attachEvent完成的這兩者的第一個參數都是事件名稱繫結事件名稱在javascript中和 javascript property的使用又不相同利用這兩者具有附加的效果而非取代效果所以在取消時必須用 unclick ,unbind 否則新的click只是附加動作同時利用進階模式來取消無法移除傳統註冊以及行內註冊事件 <input type="button" id="id1" onclick="alert('001122');" value="alert"> <input type="button" onclick="$('#id1').unclick();" value="C1"> //->不生效 <input type="button" onclick="$('#id1').unbind('click');" value="C2">//->不生效 <input type="button" onclick="$('#id1').click(function(){alert('334455');});" value="RE"> //->可以附加event handler http://jsfiddle.net/6n4sr/15/ <input type="button" onclick="$('#id1').click(function(){});" value="C"> 是不行的因為他是附加動作不是覆蓋動作同時在jQuery中使用 $('#id1').click(); 很容易讓人迷惘因為在javascript中他明明是事件模擬(event simulation) 但是到了jQuery中變成繫結方法所以如果不傳參數是否就是事件模擬而他的事件模擬是否有修正javascript中只對表單欄位動作的問題則不確定結論 1.行內註冊和傳統註冊建議還是用javascript property mapping的方式來取代原來的handler 和移除沒辦法用 removeEventListener() 和 detachEvent()移除 bind和unbind 都是用addEventListener 和 removeEventListener() 寫成的所以也沒辦法移除行內註冊 2.在jQuery中只用bind('click',xxx) 和 unbind('click',xxx)的寫法來替代click()和unclick() 以避免不經意的變成事件模擬 3.其實很多問題都是來自於後繼者不想更動原來的網頁和js程式碼因此直接在網頁上寫inline註冊事件但是卻沒有了解inline註冊的意義 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 203.73.175.237 ※ 編輯: sk1765 來自: 203.73.175.237 (01/29 15:36)

→