왜 onclick 트 시설과 함께 setAttribute 작동하지 못에서 IE?
-
01-07-2019 - |
문제
실행으로 이 문제는 오늘날,을 게시하는 경우 다른 사람이 동일한 문제입니다.
var execBtn = document.createElement('input');
execBtn.setAttribute("type", "button");
execBtn.setAttribute("id", "execBtn");
execBtn.setAttribute("value", "Execute");
execBtn.setAttribute("onclick", "runCommand();");
밝혀 즉 얻기 위해 실행하는 onclick 에서 동적으로 생성되는 요소를 사용할 수 없습 setAttribute.대신에,우리는 설정할 필요가 onclick 숙박 시설에 객체를 익명의 기능을 감싸는 코드는 실행하고 싶.
execBtn.onclick = function() { runCommand() };
나쁜 아이디:
당신이 할 수 있는
execBtn.setAttribute("onclick", function() { runCommand() });
하지만 그것은 휴식 IE 에서에 비준 모드에 따라@scunliffe.
당신은 할 수 없이 모든
execBtn.setAttribute("onclick", runCommand() );
기 때문에 그것을 실행하는 즉시,그리고 세트의 결과를 실행 명령()할 onClick 특성 값을 할 수 있도
execBtn.setAttribute("onclick", runCommand);
해결책
이 일을 위해서 모두 FF 고 즉를 작성해야 합니다 모두 방법:
button_element.setAttribute('onclick','doSomething();'); // for FF
button_element.onclick = function() {doSomething();}; // for IE
감사 이 게시물.
업데이트:이를 입증하는 때때로 그것이 가 을 사용할 필요가 setAttribute!이 방법은 필요하신 경우를 원래 onclick 특성에서는 HTML 추가 onclick 이벤트,그래서하지 않는 것을 재지정:
// get old onclick attribute
var onclick = button_element.getAttribute("onclick");
// if onclick is not a function, it's not IE7, so use setAttribute
if(typeof(onclick) != "function") {
button_element.setAttribute('onclick','doSomething();' + onclick); // for FF,IE8,Chrome
// if onclick is a function, use the IE7 method and call onclick() in the anonymous function
} else {
button_element.onclick = function() {
doSomething();
onclick();
}; // for IE7
}
다른 팁
가 크 컬렉션의 특성 를 설정할 수 없습에서 즉 용 .setAttribute() 을 포함하는 모든 인라인 이벤트 처리기입니다.
자세한 내용은 여기를 참조하십시오:
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html
매우 좋습니다.
을 모두 사용하는 방법으로 될 것 같은 불필요한 지금:
execBtn.onclick = function() { runCommand() };
분명히 작품에서 모든 현재 브라우저입니다.
테스트에서는 현재 Firefox,IE,Safari,Opera,Chrome Windows;Firefox 와 주현절에 Ubuntu;지에서 테스트 Mac 또는 모바일 시스템입니다.
- 크레이그:고 싶"문서입니다.getElementById(ID).type='password';
- 는 사람을 확인하"매개 변"접근 서로 다른 엔진?
이것은 놀라운 기능을 위한 크로스 브라우저 호환 이벤트를 구속력이 있습니다.
서 그것을 가지고 http://js.isite.net.au/snippets/addevent
그것으로 당신이 할 수 있습니다 단지 Events.addEvent(element, event, function);
고 걱정은 무료입니다!
예를 들어:(http://jsfiddle.net/Zxeka/)
function hello() {
alert('Hello');
}
var button = document.createElement('input');
button.value = "Hello";
button.type = "button";
Events.addEvent(input_0, "click", hello);
document.body.appendChild(button);
여기 기능:
// We create a function which is called immediately,
// returning the actual function object. This allows us to
// work in a separate scope and only return the functions
// we require.
var Events = (function() {
// For DOM2-compliant browsers.
function addEventW3C(el, ev, f) {
// Since IE only supports bubbling, for
// compatibility we can't use capturing here.
return el.addEventListener(ev, f, false);
}
function removeEventW3C(el, ev, f) {
el.removeEventListener(ev, f, false);
}
// The function as required by IE.
function addEventIE(el, ev, f) {
// This is to work around a bug in IE whereby the
// current element doesn't get passed as context.
// We pass it via closure instead and set it as the
// context using call().
// This needs to be stored for removeEvent().
// We also store the original wrapped function as a
// property, _w.
((el._evts = el._evts || [])[el._evts.length]
= function(e) { return f.call(el, e); })._w = f;
// We prepend "on" to the event name.
return el.attachEvent("on" + ev,
el._evts[el._evts.length - 1]);
}
function removeEventIE(el, ev, f) {
for (var evts = el._evts || [], i = evts.length; i--; )
if (evts[i]._w === f)
el.detachEvent("on" + ev, evts.splice(i, 1)[0]);
}
// A handler to call all events we've registered
// on an element for legacy browsers.
function addEventLegacyHandler(e) {
var evts = this._evts[e.type];
for (var i = 0; i < evts.length; ++i)
if (!evts[i].call(this, e || event))
return false;
}
// For older browsers. We basically reimplement
// attachEvent().
function addEventLegacy(el, ev, f) {
if (!el._evts)
el._evts = {};
if (!el._evts[ev])
el._evts[ev] = [];
el._evts[ev].push(f);
return true;
}
function removeEventLegacy(el, ev, f) {
// Loop through the handlers for this event type
// and remove them if they match f.
for (var evts = el._evts[ev] || [], i = evts.length; i--; )
if (evts[i] === f)
evts.splice(i, 1);
}
// Select the appropriate functions based on what's
// available on the window object and return them.
return window.addEventListener
? {addEvent: addEventW3C, removeEvent: removeEventW3C}
: window.attachEvent
? {addEvent: addEventIE, removeEvent: removeEventIE}
: {addEvent: addEventLegacy, removeEvent: removeEventLegacy};
})();
원하지 않는 경우에 사용하는 등 큰 기능 이 작동해야한 거의 모든 포함하여 브라우저 IE:
if (el.addEventListener) {
el.addEventListener('click', function, false);
} else if (el.attachEvent) {
el.attachEvent('onclick', function);
}
에 응답하는 크레이그의 질문입니다.당신이해야 할 것들에게 새로운 요소 및 복사를 통해 특성을의 오래된 요소입니다.이 기능은 작업을 수행해야 합니다:(원)
function changeInputType(oldObject, oType) {
var newObject = document.createElement('input');
newObject.type = oType;
if(oldObject.size) newObject.size = oldObject.size;
if(oldObject.value) newObject.value = oldObject.value;
if(oldObject.name) newObject.name = oldObject.name;
if(oldObject.id) newObject.id = oldObject.id;
if(oldObject.className) newObject.className = oldObject.className;
oldObject.parentNode.replaceChild(newObject,oldObject);
return newObject;
}
또는 사용할 수 있습 jQuery 및 그 문제점:
var execBtn = $("<input>", {
type: "button",
id: "execBtn",
value: "Execute"
})
.click(runCommand);
jQuery 한 모든 정보를 처리하는 크로스 브라우저 문제 뿐만 아니라.
실제로,지금까지 내가 알고,동적으로 생성된 인라인 이벤트 처리기 할 일을 완벽하게 이내에 인터넷 익스플로러 8 면으로 만들어졌 x.setAttribute()
명령당신은 단지 그 위치를 제대로 내에서 JavaScript 코드입니다.나는 우연히 발견의 문제에 대한 해결책을(광산) 기.
이동할 때 나는 내 모든 문을 포함하는 x.appendChild()
자신의 올바른 위치를(예:바로 다음과 같은 마지막 setAttribute 명령에 자신의 그룹),내가 찾는 모든 단일 setAttribute 일 IE8 에서 그것으로 가정했을 포함하여 모든 양식에 입력된 특성을 포함하여("name","유형"속성 뿐만 아니라,나"onclick"이벤트 처리기).
이 아주 놀라운 때문에,내가 가기 전에 내가 이것을 했었 쓰레기 렌더링 화면에서,그리고 하나는 오류입니다.또한,내가 찾는 모든 setAttribute 여전히 일 이내에 다른 브라우저 뿐만 아니라,그래서 만약 당신이 기억이 간단한 코딩-실습,당신은 좋은 가 대부분의 경우에 있습니다.
그러나,이 솔루션을 작동하지 않을 변경해야 하는 경우에는 모든 특성에 비행기 때문에서 변경할 수 없습니다면 즉 자신의 HTML 요소가 추가되었습니다 DOM;이 경우에는,내가 상상하는 것 중 하나는 요소를 삭제합니다 DOM 에서 다음과 특성(정확한 순서,당연히!) 그들이 제대로 작동하려면,및 던지지 어떤 오류가 있습니다.
쓰기 기능,인라인 및 통역은 충분히 똑똑하게 알고 있을 작성 기능이다.그것이 가정의 문자열(는 기술적으로).
function CheckBrowser(){
if(navigator.userAgent.match(/Android/i)!=null||
navigator.userAgent.match(/BlackBerry/i)!=null||
navigator.userAgent.match(/iPhone|iPad|iPod/i)!=null||
navigator.userAgent.match(/Nokia/i)!=null||
navigator.userAgent.match(/Opera M/i)!=null||
navigator.userAgent.match(/Chrome/i)!=null)
{
return 'OTHER';
}else{
return 'IE';
}
}
function AddButt(i){
var new_butt = document.createElement('input');
new_butt.setAttribute('type','button');
new_butt.setAttribute('value','Delete Item');
new_butt.setAttribute('id', 'answer_del_'+i);
if(CheckBrowser()=='IE'){
new_butt.setAttribute("onclick", function() { DelElemAnswer(i) });
}else{
new_butt.setAttribute('onclick','javascript:DelElemAnswer('+i+');');
}
}
당신이 시도했다:
execBtn.setAttribute("onclick", function() { runCommand() });
어떤 경우에는 예 여기에 나열된 작동하지 않은 나를 위해서 인터넷 Explorer.
기 때문이 있을 속성을 설정하는 방법이고(브래킷)
HtmlElement.onclick = myMethod;
그것은 작동하지 않는 경우에 당신은 전체 이름 또는 매개 변수입니다.Internet Explorer 을 만들어야 합니다 새로운 개체로서 런타임:
HtmlElement.onclick = new Function('myMethod(' + someParameter + ')');
작품 또는 다른 브라우저입니다.
지에 관련된 onclick 문제이지만,또한과 관련된:
Html 속성이 누구의 이름과 충돌 javascript 예약어,다른 이름은 선택,예를 들어,. <div class=''>
, 하지만, div.className
, 나 <label for='...'>
, 하지만, label.htmlFor
.
에서 합리적인 브라우저에 영향을 미치지 않는다 setAttribute
.그래서 도마뱀과 webkit 고 div.setAttribute('class', 'foo')
, 지만,IE 에서 당신은 가용 javascript 속성 이름 대신에,그래서 div.setAttribute('className', 'foo')
.
을 고려하기보다는 설정의 특성은?다른 것들 사이에서,그것은 당신이 통과 매개 변수는 문제로 실행하려고 할 때 이렇게.당신은 여전히 해야 할 두 번 IE Mozilla:
function makeEvent(element, callback, param, event) {
function local() {
return callback(param);
}
if (element.addEventListener) {
//Mozilla
element.addEventListener(event,local,false);
} else if (element.attachEvent) {
//IE
element.attachEvent("on"+event,local);
}
}
makeEvent(execBtn, alert, "hey buddy, what's up?", "click");
그냥 이벤트가 될 이름을 좋아"클릭"또는"mouseover".
내가 이것을 얻을 주위에 이동,나의 케이스에서 나를 사용하지 않는'input'요소를 대신 내가 사용하는 이미지 때,나를 설정"onclick"속성을 위해 이미 경험했던 동일한 문제이나 포장으로 이미지"a"요소를 참조점 기능은 이렇습니다.
var rowIndex = 1;
var linkDeleter = document.createElement('a');
linkDeleter.setAttribute('href', "javascript:function(" + rowIndex + ");");
var imgDeleter = document.createElement('img');
imgDeleter.setAttribute('alt', "Delete");
imgDeleter.setAttribute('src', "Imagenes/DeleteHS.png");
imgDeleter.setAttribute('border', "0");
linkDeleter.appendChild(imgDeleter);
이 execBtn.onclick=function(){eval('실행 명령()')};
나를 위해 그것을 작동합니다.