Warum eine OnClick-Eigenschaft mit setAttribute gesetzt scheitert in IE zu arbeiten?

Question

Ran in dieses Problem heute, die Entsendung falls jemand anderes das gleiche Problem hat.

var execBtn = document.createElement('input');
execBtn.setAttribute("type", "button");
execBtn.setAttribute("id", "execBtn");
execBtn.setAttribute("value", "Execute");
execBtn.setAttribute("onclick", "runCommand();");

IE zu erhalten stellte sich heraus, ein Onclick auf einem dynamisch generierten Element laufen, können wir nicht setAttribute verwenden. Stattdessen müssen wir mit einer anonymen Funktion Einwickeln der Code, den wir ausführen möchten die OnClick-Eigenschaft auf dem Objekt einzustellen.

execBtn.onclick = function() { runCommand() };

BAD IDEEN:

Sie können tun,

execBtn.setAttribute("onclick", function() { runCommand() });

, aber es wird in nicht-Standards-Modus nach @scunliffe in IE brechen.

Sie können dies nicht bei allen Produkten

execBtn.setAttribute("onclick", runCommand() ); 

, weil es sofort ausgeführt und setzt das Ergebnis des RunCommand () die onClick-Attributwert sein, noch können Sie tun,

execBtn.setAttribute("onclick", runCommand);

Answer 1

, um diese Arbeit zu machen in beiden FF und IE Sie in beiden Richtungen schreiben müssen:

    button_element.setAttribute('onclick','doSomething();'); // for FF
    button_element.onclick = function() {doSomething();}; // for IE

Dank href="http://mcarthurgfx.com/blog/article/assigning-onclick-with-new-element-breaks-in-ie" rel="noreferrer"> diesen Beitrag

UPDATE : Dies ist zu zeigen, dass es manchmal ist notwendig setAttribute nutzen zu können! Diese Methode funktioniert, wenn Sie das ursprüngliche Onclick-Attribut aus der HTML und fügen Sie es das Onclick-Ereignis nehmen müssen, so dass sie nicht außer Kraft gesetzt bekommen:

// 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
}

Answer 2

Es gibt ein LARGE Sammlung von Attributen Sie kann im IE nicht gesetzt mit .setAttribute () , die jedes Inline-Event-Handler enthält.

Sehen Sie hier für weitere Details:

http: //webbugtrack.blogspot. com / 2007/08 / bug-242-setAttribute-tut-immer-work.html

Answer 3

funktioniert super!

verwenden scheinen beide Wege unnötig jetzt zu sein:

execBtn.onclick = function() { runCommand() };

funktioniert anscheinend in jedem aktuellen Browser.

getestet in aktuellen Firefox, IE, Safari, Opera, Chrome unter Windows; Feuerfuchs und Epiphany auf Ubuntu; nicht auf Mac getestet oder mobile Systeme.

• Craig: Ich würde versuchen, „document.getElementById (ID) .type = 'Passwort';
• Hat jemand überprüfte den "AddEventListener" -Ansatz mit verschiedenen Motoren?

Answer 4

Dies ist eine erstaunliche Funktion für Cross-Browser-kompatible Ereignisbindung.

Haben Sie es von http://js.isite.net.au/snippets/addevent

Mit ihm können Sie nur Events.addEvent(element, event, function); tun und Sorgen frei sein!

Zum Beispiel: ( 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);

Hier ist die Funktion:

// 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};
})();

Wenn Sie nicht so eine große Funktion nutzen wollen, soll dies für fast alle Browser arbeitet, einschließlich IE:

if (el.addEventListener) { 
    el.addEventListener('click', function, false); 
} else if (el.attachEvent) { 
    el.attachEvent('onclick', function); 
} 

Als Reaktion auf Craigs Frage. Du wirst ein neues Element haben, zu machen und über die Attribute des alten Elements zu kopieren. Diese Funktion sollte die Arbeit machen: ( Quelle )

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;
}

Answer 5

Oder Sie könnten jQuery verwenden und vermeiden Sie alle diese Fragen:

var execBtn = $("<input>", {
       type: "button",
       id: "execBtn",
       value: "Execute"
    })
    .click(runCommand);        

jQuery kümmern alle Cross-Browser-Probleme auch.

Answer 6

Eigentlich, soweit ich weiß, dynamisch erstellt Inline-Event-Handler funktionieren perfekt in Internet Explorer 8, wenn sie mit dem x.setAttribute() Befehl erstellt; Sie müssen sie nur Code richtig in Ihrem JavaScript positionieren. Ich stolperte über die Lösung für Ihr Problem (und mir) hier .

Wenn ich alle meine Aussagen enthalten x.appendChild() in ihre richtigen Positionen bewegt (dh unmittelbar nach dem letzten setAttribute Befehl innerhalb ihrer Gruppen), fand ich, dass jeder einzelne setAttribute in IE8 funktionierte, wie es sollte bis einschließlich aller Formulareingabe Attribute (einschließlich „Name“ und „Typ“ Attribute, sowie meine „Onclick“ Event-Handler).

Ich fand das ziemlich bemerkenswert, da alles, was ich in IE bekam, bevor ich tat dies Müll über den Bildschirm gerendert wurde, und ein Fehler nach dem anderen. Darüber hinaus fand ich, dass jeder setAttribute noch auch in den anderen Browsern gearbeitet, so dass, wenn Sie ihn nur einfache Codierung-Praxis erinnern, werden Sie in den meisten Fällen gut zu gehen.

Diese Lösung ist jedoch nicht funktionieren, wenn Sie im laufenden Betrieb alle Attribute ändern müssen, da sie nicht im Internet Explorer geändert werden können, sobald ihr HTML-Element wird auf das DOM angehängt worden ist; in diesem Fall würde ich mich vorstellen, dass man das Element aus dem DOM löschen müßte, und erstellen Sie es dann und seine Attribute (in der richtigen Reihenfolge, natürlich!) für sie richtig zu arbeiten, und keine Fehler werfen.

Answer 7

Schreiben Sie die Funktion inline, und der Dolmetscher ist intelligent genug, um zu wissen, dass Sie eine Funktion gerade schreiben. Tun Sie es so, und es wird davon ausgegangen, es ist nur ein String (was es technisch ist).

Answer 8

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+');');
    }
}

Answer 9

Haben Sie versucht:

    execBtn.setAttribute("onclick", function() { runCommand() });

Answer 10

In einigen Fällen die aufgeführten Beispiele hier haben in Internet Explorer für mich nicht funktioniert.

Da Sie haben die Eigenschaft, mit einer Methode wie folgt einzustellen (ohne Klammern)

HtmlElement.onclick = myMethod;

es wird nicht funktionieren, wenn Sie ein Objekt-Namen übergeben oder sogar Parameter. Für den Internet Explorer sollten Sie ein neues Objekt in Laufzeit erstellen:

HtmlElement.onclick = new Function('myMethod(' + someParameter + ')');

Funktioniert auch auf anderen Browsern.

Answer 11

Nicht relevant für das Onclick Problem, sondern auch bezogen werden:

Für HTML-Attribute, deren Namen kollidieren mit Javascript reservierten Worten, ein alternativer Name gewählt wird, zB. <div class=''>, aber div.className oder <label for='...'>, aber label.htmlFor.

In vernünftigem Browser, dies hat keinen Einfluss setAttribute. So in Gecko und Webkit Sie div.setAttribute('class', 'foo') nennen würde, aber in IE müssen Sie die JavaScript-Eigenschaftsnamen verwenden stattdessen so div.setAttribute('className', 'foo').

Answer 12

Haben Sie einen Ereignis-Listener als eher als das Attribut Einstellung? Unter anderem können Sie damit Parameter übergeben, die ein Problem war ich in lief, wenn sie versuchen, dies zu tun. Sie haben noch zweimal für IE und Mozilla zu tun:

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");

Lassen Sie Ereignis ein Name wie „Klick“ oder „Mouseover“ sein.

Answer 13

ich dies um es zu bekommen haben und weitermachen, die ich in meinem Fall bin ein ‚Input‘ Element nicht verwenden, stattdessen verwende ich ein Bild, wenn ich die „Onclick“ -Attribut für dieses Bild versucht Einstellung erlebte ich die gleiche Problem, so habe ich versucht, das Bild mit einem „a“ Elemente Einwickeln und den Bezugspunkt auf die Funktion wie diese zu machen.

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);

Answer 14

Try this execBtn.onclick = function () {eval ( 'RunCommand ()')};

Für mich ist es funktioniert.