왜 onclick 트 시설과 함께 setAttribute 작동하지 못에서 IE?

StackOverflow https://stackoverflow.com/questions/95731

  •  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('실행 명령()')};

나를 위해 그것을 작동합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top