231

Wie fügt man eine hinzu? onload man einem Element Ereignis hinzu?

Kann ich benutzen:

<div onload="oQuickReply.swap();" ></div>

dafür?

javascript html monkey_boys
quelle

am besten bodybesserdiv

KingRider

2

divElemente "laden" nicht.

Amn

1

Es gibt jetzt eine relevantere Antwort - vielleicht können Sie die Annahme überarbeiten?

Mplungjan

232

Nein, das kannst du nicht. Der einfachste Weg, dies zum Laufen zu bringen, besteht darin, den Funktionsaufruf direkt nach dem Element zu setzen

Beispiel:

...
<div id="somid">Some content</div>
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
...

oder - noch besser - direkt vor </body>:

...
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
</body>

... damit das Laden des folgenden Inhalts nicht blockiert wird.

DanMan
quelle

3

Je nach Verwendung ist es nicht besser, es vor zu stellen </body>. Zum Beispiel, wenn Sie das <div>nur ausblenden möchten, wenn Javascript aktiviert ist, aber "blinken" vermeiden möchten . Die Sichtbarkeitszeit hängt davon ab, wie lange der Browser alle Inline- / externen Skripte laden / analysieren muss.

mgutt

Ist dies ein Anti-Pattern, da es besser ist, alle js in einer eigenen Datei zu behalten? Gibt es eine Möglichkeit, js selektiv auszuführen, wenn bestimmte Elemente in das Dokument geladen werden?

Ryan Walton

1

Es ist kein Anti-Pattern, aber normalerweise warten Sie, bis das DOM geladen ist, und erledigen dann alle JS-Aufgaben.

DanMan

1

Werfen Sie diesen Link hier raus für alle, die auf diese Antwort stoßen w3schools.com/tags/ev_onload.asp - Alle HTML-Elemente, die derzeit unterstützenonload

Brandon Benefield

Diese Antwort ist nicht mehr relevant. Hier ist eine neue

mplungjan

74

Das onloadEreignis kann nur für sich document(body)selbst, Frames, Bilder und Skripte verwendet werden. Mit anderen Worten, es kann nur an den Körper und / oder jede externe Ressource angehängt werden . Das div ist keine externe Ressource und wird als Teil des Körpers geladen, sodass das onloadEreignis dort nicht angewendet wird.

Kijin
quelle

18

Sie können es nicht nur im body-Element verwenden, sondern auch unter anderem mit image und iframe. w3schools.com/jsref/event_onload.asp

Joe

2

Es ist erwähnenswert, dass Inline-Skripte KEINE externen Ressourcen sind und daher ohne HTML-Attribut onloadnicht funktionieren (ich habe versucht, diesen Rat in einem Inline-Skript zu verwenden, und festgestellt, dass er nicht funktioniert)<script>src

gog

64

Sie können einige js automatisch für ein IMG-Element mit onerror und ohne src auslösen.

<img src onerror='alert()'>

John Williams
quelle

4

Brillant! Kann verwendet werden, um Typoskript auch aus dem Winkel auszulösen: img src (error) = "function ()" />

Brian Richardson

1

Dies ist ein fantastischer Ansatz. Bitte sehen Sie meine Erweiterung Ihrer Lösung hier: stackoverflow.com/questions/4057236/…

Rounin

Caniuse? ͏͏͏͏͏͏͏

Pacerier

28

Onload-Ereignis wird nur mit wenigen Tags unterstützt, wie unten aufgeführt.

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

Hier die Referenz für das Onload-Ereignis

Samda
quelle

17

Versuche dies! Und benutze niemals zweimal den Auslöser für div!

Sie können die Funktion definieren, die vor dem div-Tag aufgerufen werden soll.

$(function(){
    $('div[onload]').trigger('onload');
});

DEMO: jsfiddle

Kuofp
quelle

Oben hat jsfiddle keinen jQuery-Loader - und funktioniert nicht.

Arif Burhan

@ Arif Burhan Ich verstehe es nicht. Ich lade JQuery (Kante). Könnten Sie noch einmal überprüfen? Ich kann "Hello World" sogar mit dem Handy sehen.

Kuofp

@ Kuofp Diese Geige hat eigentlich keine Handler, die aufgerufen werden, wenn ihre Zielelemente geladen werden. Es verwendet nur jquery, um nach Elementen zu suchen, die ein Attribut haben (in Ihrem Fall onload), und ruft dann diese Funktionen auf. Das Skript funktioniert auch, wenn Sie das Attribut in etwas anderes als onloadz. B. jsfiddle.net/mrszgbxh

Trindaz

1

@ Trindaz Genau! Anders ausgedrückt, die Skripte verhalten sich wie ein Onload-Ereignis. Danke, dass du einen Kommentar hinterlassen hast!

Kuofp

10

Ich möchte hier nur hinzufügen, dass, wenn jemand eine Funktion beim Laden von div aufrufen möchte und Sie jQuery nicht verwenden möchten (aufgrund von Konflikten wie in meinem Fall), einfach eine Funktion nach dem gesamten HTML-Code oder einem anderen aufrufen möchten anderer Code, den Sie geschrieben haben, einschließlich des Funktionscodes, und rufen Sie einfach eine Funktion auf.

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
   function_name();
</script>

ODER

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
 function my_func(){
   function definition;      

  }

 my_func();
</script>

dev_khan
quelle

Können Sie auf diese Weise mehr als eine Funktion hinzufügen? dh am Ende des HTML-Dokuments kurz vor dem </ body> -Tag? Wenn ja, spielt die Reihenfolge, in der sie geschrieben wurden, eine Rolle?

Neo

Ja, Sie können mehr als eine Funktion hinzufügen, und die Reihenfolge spielt keine Rolle. Es handelt sich lediglich um einfaches (Vanille-) Javascript.

dev_khan

7

Wir können MutationObserver verwenden, um das Problem auf effiziente Weise zu lösen, indem wir unten einen Beispielcode hinzufügen

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #second{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #a1a1a1;
        }
    </style>
</head>
<body>
<div id="first"></div>
<script>
    var callthis = function(element){
           element.setAttribute("tabIndex",0);
        element.focus();
        element.onkeydown = handler;
        function handler(){
                alert("called")
        }
    }


    var observer = new WebKitMutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            for (var i = 0; i < mutation.addedNodes.length; i++)
            if(mutation.addedNodes[i].id === "second"){
                callthis(mutation.addedNodes[i]);
            }

        })
    });
    observer.observe(document.getElementById("first"), { childList: true });


    var ele = document.createElement('div');
    ele.id = "second"

    document.getElementById("first").appendChild(ele);

</script>

</body>
</html>

user2364729
quelle

1

Das letzte Mal habe ich überprüft, dass Mutationsereignisse fürchterlich durchgeführt wurden.

DanMan

7

Im November 2019 suche ich nach einer Möglichkeit, eine (hypothetische) zu erstellen, onparse EventListenerfür <elements>die es keine gibt onload.

Das (hypothetische) onparse EventListenermuss in der Lage sein zu hören, wenn ein Element analysiert wird .

Dritter Versuch (und endgültige Lösung)

Ich war ziemlich zufrieden mit dem zweiten Versuch unten, aber es fiel mir auf, dass ich den Code kürzer und einfacher machen kann, indem ich ein maßgeschneidertes Ereignis erstelle:

let parseEvent = new Event('parse');

Dies ist die bisher beste Lösung.

Das folgende Beispiel:

Erstellt eine maßgeschneiderte parse Event
Deklariert eine Funktion (die jederzeit ausgeführt werden kann window.onload), die:
- Findet alle Elemente im Dokument, die das Attribut enthalten data-onparse
- Bringt das an parse EventListener an jedes dieser Elemente an
- Versendet das parse Eventan jedes dieser Elemente, um das auszuführenCallback

Arbeitsbeispiel:

// Create (homemade) parse event
let parseEvent = new Event('parse');

// Create Initialising Function which can be run at any time
const initialiseParseableElements = () => {

  // Get all the elements which need to respond to an onparse event
  let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');
  
  // Attach Event Listeners and Dispatch Events
  elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

    elementWithParseEventListener.addEventListener('parse', updateParseEventTarget, false);
    elementWithParseEventListener.dataset.onparsed = elementWithParseEventListener.dataset.onparse;
    elementWithParseEventListener.removeAttribute('data-onparse');
    elementWithParseEventListener.dispatchEvent(parseEvent);
  });
}

// Callback function for the Parse Event Listener
const updateParseEventTarget = (e) => {
  
  switch (e.target.dataset.onparsed) {

    case ('update-1') : e.target.textContent = 'My First Updated Heading'; break;
    case ('update-2') : e.target.textContent = 'My Second Updated Heading'; break;
    case ('update-3') : e.target.textContent = 'My Third Updated Heading'; break;
    case ('run-oQuickReply.swap()') : e.target.innerHTML = 'This <code>&lt;div&gt;</code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
  }
}

// Run Initialising Function
initialiseParseableElements();

let dynamicHeading = document.createElement('h3');
dynamicHeading.textContent = 'Heading Text';
dynamicHeading.dataset.onparse = 'update-3';

setTimeout(() => {

  // Add new element to page after time delay
  document.body.appendChild(dynamicHeading);

  // Re-run Initialising Function
  initialiseParseableElements();

}, 3000);

div {
  width: 300px;
  height: 40px;
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
}

h3 {
position: absolute;
top: 0;
right: 0;
}

<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>

Erweitern Sie das Snippet

Zweiter Versuch

Der erste Versuch unten (basierend auf @JohnWilliams'Brillant Empty Image Hack' ) verwendete einen fest codierten<img /> und funktionierenden.

Ich dachte, es sollte möglich sein, das fest codierte <img />Element vollständig zu entfernen und es nur dynamisch einzufügen, nachdem in einem Element, das ein onparseEreignis auslösen musste, ein Attribut wie das folgende festgestellt wurde :

data-onparse="run-oQuickReply.swap()"

Es stellt sich heraus, dass dies sehr gut funktioniert.

Das folgende Beispiel:

Findet alle Elemente im Dokument, die das Attribut enthalten data-onparse
Generiert dynamisch ein <img src />und hängt es unmittelbar nach jedem dieser Elemente an das Dokument an
Löst das aus, onerror EventListenerwenn die Rendering-Engine jeweils analysiert<img src />
Führt das aus Callback und entfernt das dynamisch <img src />aus dem Dokument generierte

Arbeitsbeispiel:

// Get all the elements which need to respond to an onparse event
let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');

// Dynamically create and position an empty <img> after each of those elements 
elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

  let emptyImage = document.createElement('img');
  emptyImage.src = '';
  elementWithParseEventListener.parentNode.insertBefore(emptyImage, elementWithParseEventListener.nextElementSibling);
});

// Get all the empty images
let parseEventTriggers = document.querySelectorAll('img[src=""]');

// Callback function for the EventListener below
const updateParseEventTarget = (e) => {

  let parseEventTarget = e.target.previousElementSibling;
  
  switch (parseEventTarget.dataset.onparse) {

    case ('update-1') : parseEventTarget.textContent = 'My First Updated Heading'; break;
    case ('update-2') : parseEventTarget.textContent = 'My Second Updated Heading'; break;
    case ('run-oQuickReply.swap()') : parseEventTarget.innerHTML = 'This <code>&lt;div&gt;</code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
  }
  
  // Remove empty image
  e.target.remove();
}

// Add onerror EventListener to all the empty images
parseEventTriggers.forEach((parseEventTrigger) => {
  
  parseEventTrigger.addEventListener('error', updateParseEventTarget, false);
  
});

div {
  width: 300px;
  height: 40px;
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
}

<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>

Erweitern Sie das Snippet

Erster Versuch

Ich kann auf @JohnWilliams' <img src>Hack ' aufbauen (auf dieser Seite ab 2017) - das ist bisher der beste Ansatz, den ich je gesehen habe.

Das folgende Beispiel:

Löst das aus, onerror EventListenerwenn die Rendering-Engine analysiert wird<img src />
Führt das aus Callback und entfernt es <img src />aus dem Dokument

Arbeitsbeispiel:

let myHeadingLoadEventTrigger = document.getElementById('my-heading-load-event-trigger');

const updateHeading = (e) => {

  let myHeading = e.target.previousElementSibling;
  
  if (true) { // <= CONDITION HERE
    
    myHeading.textContent = 'My Updated Heading';
  }
  
  // Modern alternative to document.body.removeChild(e.target);
  e.target.remove();
}

myHeadingLoadEventTrigger.addEventListener('error', updateHeading, false);

<h2>My Heading</h2>
<img id="my-heading-load-event-trigger" src />

Erweitern Sie das Snippet

Rounin
quelle

Siehe: stackoverflow.com/questions/58837574/…

Rounin

@ DavidBradshaw - Du wirst es nie glauben, aber ich glaube, ich habe es tatsächlich geknackt. Siehe den zweiten Versuch oben in der Antwort oben.

Rounin

1

@ DavidBradshaw - Kratz das. Ich habe mir einen dritten Versuch ausgedacht . Dies ist die endgültige Lösung.

Rounin

Vielleicht reduzieren Sie die Antwort auf Version 3

David Bradshaw

6

Verwenden Sie einen Iframe und blenden Sie ihn aus. Iframe funktioniert wie ein Body-Tag

<!DOCTYPE html>
<html>
<body>

<iframe style="display:none" onload="myFunction()" src="http://www.w3schools.com"></iframe>
<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>

</body>
</html>

dota2pro
quelle

6

Nach dem Einfügen eines Teils von HTML (Vorlageninstanz) musste ein Initialisierungscode ausgeführt werden, und natürlich hatte ich keinen Zugriff auf den Code, der die Vorlage manipuliert und das DOM ändert. Die gleiche Idee gilt für jede teilweise Änderung des DOM durch Einfügen eines HTML-Elements, normalerweise a<div> .

Vor einiger Zeit habe ich einen Hack mit dem Onload-Ereignis eines fast unsichtbaren gemacht <img> in einem enthalten <div>, aber entdeckt , dass ein scoped, leerer Stil wird auch tun:

<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" >   </style>
.....
</div>

Update (15. Juli 2017) - Die <style> Onload wird in der letzten Version des IE nicht unterstützt. Edge unterstützt es zwar, aber einige Benutzer sehen dies als einen anderen Browser und bleiben beim IE. Das <img>Element scheint in allen Browsern besser zu funktionieren.

<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>

Verwenden Sie einen Inline-Quellcode, der das Bild klein und transparent hält, um die visuelle Auswirkung und den Ressourcenverbrauch des Bildes zu minimieren.

Ein Kommentar, den ich zur Verwendung von a machen muss, <script>ist, wie viel schwieriger es ist, festzustellen, welche<div> Nähe sich das Skript befindet, insbesondere bei Vorlagen, bei denen Sie nicht in jeder von der Vorlage generierten Instanz eine identische ID haben können. Ich dachte, die Antwort könnte document.currentScript sein, aber dies wird nicht allgemein unterstützt. Ein <script>Element kann seinen eigenen DOM-Standort nicht zuverlässig bestimmen. Ein Verweis auf "dies" verweist auf das Hauptfenster und ist nicht hilfreich.

Ich glaube, es ist notwendig, sich mit der Verwendung eines <img>Elements zufrieden zu geben, obwohl es doof ist. Dies könnte eine Lücke im DOM / Javascript-Framework sein, die das Einstecken verwenden könnte.

Floyd Kosch
quelle

3

Da das onloadEreignis nur von wenigen Elementen unterstützt wird, müssen Sie eine alternative Methode verwenden.

Sie können hierfür einen MutationObserver verwenden :

const trackElement = element => {
  let present = false;
  const checkIfPresent = () => {
    if (document.body.contains(element)) {
      if (!present) {
        console.log('in DOM:', element);
      }
      present = true;
    } else if (present) {
      present = false;
      console.log('Not in DOM');
    }
  };

  const observer = new MutationObserver(checkIfPresent);
  observer.observe(document.body, { childList: true });
  checkIfPresent();

  return observer;
};

const element = document.querySelector('#element');
const add = () => document.body.appendChild(element);
const remove = () => element.remove();

trackElement(element);

<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>

<div id="element">Element</div>

Erweitern Sie das Snippet

jo_va
quelle

2

Ich mag die YUI3-Bibliothek für solche Dinge wirklich.

<div id="mydiv"> ... </div>

<script>
YUI().use('node-base', function(Y) {
  Y.on("available", someFunction, '#mydiv')
})

Siehe: http://developer.yahoo.com/yui/3/event/#onavailable

mjhm
quelle

9

Das ist ein ziemlich großer JS-Blob, der auf die Seite geschrieben werden muss, um eine einzelne zu binden onload.

Meagar

1

@meagar - Richtig, obwohl ich es immer seltener finde, dass ich nur zwei oder drei einfache JS-Dinge auf einer Seite mache. Die Sorge um die Cross-Browser-Kompatibilität macht mich auch verrückt.

mjhm

0

Ich lerne Javascript und JQuery und habe die ganze Antwort durchgearbeitet. Beim Aufruf der Javascript-Funktion zum Laden des div-Elements hatte ich das gleiche Problem. Ich habe es versucht$('<divid>').ready(function(){alert('test'}) und es hat bei mir funktioniert. Ich möchte wissen, ob dies eine gute Möglichkeit ist, einen Onload-Aufruf für das div-Element so auszuführen, wie ich es mit dem jquery-Selektor getan habe.

Vielen Dank

subro
quelle

0

Wie gesagt, Sie können das onLoad-Ereignis nicht auf einem DIV verwenden, sondern vor dem Body-Tag.

aber für den Fall, dass Sie eine Fußzeilendatei haben und diese auf vielen Seiten einfügen. Es ist besser, zuerst zu überprüfen, ob das gewünschte Div auf dieser Seite angezeigt wird, damit der Code nicht auf den Seiten ausgeführt wird, die dieses DIV nicht enthalten, damit es schneller geladen wird und Zeit für Ihre Anwendung gespart wird.

Sie müssen diesem DIV also eine ID geben und Folgendes tun:

var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}

Mostafa Yousef
quelle

0

Ich hatte die gleiche Frage und versuchte, eine Div dazu zu bringen, ein Bildlaufskript mit Onload oder Load zu laden. Das Problem, das ich fand, war, dass es immer funktionieren würde, bevor die Div geöffnet werden konnte, nicht während oder nach, also würde es nicht wirklich funktionieren.

Dann habe ich mir das als Workaround ausgedacht.

<body>

<span onmouseover="window.scrollTo(0, document.body.scrollHeight);" 
onmouseout="window.scrollTo(0, document.body.scrollHeight);">

<div id="">
</div>

<a href="" onclick="window.scrollTo(0, document.body.scrollHeight);">Link to open Div</a>

</span>
</body>

Ich platzierte die Div in einer Spanne und gab der Spanne zwei Ereignisse, ein Mouseover und ein Mouseout. Dann platzierte ich unter dieser Div einen Link, um die Div zu öffnen, und gab diesem Link ein Ereignis für einen Klick. Alle Ereignisse sind exakt gleich, damit die Seite zum Ende der Seite scrollen kann. Wenn Sie nun auf die Schaltfläche zum Öffnen des Div klicken, springt die Seite teilweise nach unten, und das Div wird über der Schaltfläche geöffnet, wodurch die Mouseover- und Mouseout-Ereignisse dazu beitragen, das Scroll-Down-Skript zu verschieben. Dann wird jede Bewegung der Maus an diesem Punkt das Skript ein letztes Mal drücken.

Selektiv
quelle

0

Sie können ein Intervall verwenden, um danach zu suchen, bis es wie folgt geladen wird : https://codepen.io/pager/pen/MBgGGM

let checkonloadDoSomething = setInterval(() => {
  let onloadDoSomething = document.getElementById("onloadDoSomething");
  if (onloadDoSomething) {
    onloadDoSomething.innerHTML="Loaded"
    clearInterval(checkonloadDoSomething);
  } else {`enter code here`
    console.log("Waiting for onloadDoSomething to load");
  }
}, 100);

Robert Page
quelle

0

Beantworten Sie zuerst Ihre Frage: Nein, Sie können nicht, nicht direkt, wie Sie es wollten. Es mag etwas spät sein zu antworten, aber dies ist meine Lösung ohne jQuery, reines Javascript. Es wurde ursprünglich geschrieben, um eine Größenänderungsfunktion auf Textbereiche anzuwenden, nachdem DOM geladen und aufgeschlüsselt wurde.

Genauso wie Sie es verwenden könnten, um etwas mit (allen) Divs zu tun, oder nur mit einem, falls angegeben, wie folgt:

document.addEventListener("DOMContentLoaded", function() {
    var divs = document.querySelectorAll('div'); // all divs
    var mydiv = document.getElementById('myDiv'); // only div#myDiv
    divs.forEach( div => {
        do_something_with_all_divs(div);
    });
    do_something_with_mydiv(mydiv);
});

Wenn Sie wirklich etwas mit einem Div tun müssen, das nach dem Laden des DOM geladen wird, z. B. nach einem Ajax-Aufruf, können Sie einen sehr hilfreichen Hack verwenden, der leicht zu verstehen ist und bei dem Sie feststellen werden, dass Sie mit ... arbeiten. Elemente-vor-dem-dom-ist-bereit ... . Es heißt "bevor das DOM fertig ist", aber es funktioniert genauso brillant, nach einer Ajax-Einfügung oder js-appendChild-was auch immer von einem Div. Hier ist der Code mit einigen winzigen Änderungen an meinen Anforderungen.

CSS

.loaded { // I use only class loaded instead of a nodename
    animation-name: nodeReady;
    animation-duration: 0.001s;
}

@keyframes nodeReady {  
    from { clip: rect(1px, auto, auto, auto); }
    to { clip: rect(0px, auto, auto, auto); }  
}

Javascript

document.addEventListener("animationstart", function(event) {
    var e = event || window.event;
    if (e.animationName == "nodeReady") {
        e.target.classList.remove('loaded');
        do_something_else();
    }
}, false);

ddlab
quelle

0

Wenn Sie HTML vom Server laden und in den DOM-Baum einfügen, können Sie es verwenden, DOMSubtreeModifiedes ist jedoch veraltet. Sie können also MutationObserverneuen Inhalt in der loadElement-Funktion direkt verwenden oder nur erkennen, sodass Sie nicht auf DOM-Ereignisse warten müssen

Code-Snippet anzeigen

var ignoreFirst=0;
var observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirst++>0) {
    console.log('Element add on', new Date());
  }
}
)).observe(content, {childList: true, subtree:true });


// simulate element loading
var tmp=1;
function loadElement(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadElement('Michael');
loadElement('Madonna');
loadElement('Shakira');

<div id="content"><div>

Erweitern Sie das Snippet

Kamil Kiełczewski
quelle

0

Sie können einen Ereignis-Listener wie folgt anhängen. Es wird immer dann ausgelöst, wenn der Div mit dem Selektor #my-idvollständig in das DOM geladen wird.

$(document).on('EventName', '#my-id', function() {
 // do something
});

In diesem Fall kann EventName "Laden" oder "Klicken" sein.

https://api.jquery.com/on/#on-events-selector-data-handler

SkyRar
quelle

-1

Verwenden Sie stattdessen das Ereignis body.onload, entweder über attribute ( <body onload="myFn()"> ...) oder durch Binden eines Ereignisses in Javascript. Dies ist bei jQuery sehr häufig :

$(document).ready(function() {
    doSomething($('#myDiv'));
});

mway
quelle

Javascript rein und nicht jquery, check tag;)

KingRider

-3

Versuche dies.

document.getElementById("div").onload = alert("This is a div.");

<div id="div">Hello World</div>

Versuchen Sie auch dieses. Sie müssen entfernen .aus , oQuickReply.swap()um die Funktion Arbeits zu machen.

document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}

<div id="div"></div>

quelle

Es scheint zu funktionieren, aber es wird lediglich alert("This is a div.");aufgerufen, wenn diese Zeile ausgeführt und das Ergebnis (das ist undefined) zugewiesen wird div.onload. Welches ist völlig sinnlos.

Frederic Leitenberger

-4

Sie können kein Ereignis-Onload für div hinzufügen, aber Sie können ein Onkeydown-Ereignis hinzufügen und ein Onkeydown-Ereignis beim Laden des Dokuments auslösen

$(function ()
{
  $(".ccsdvCotentPS").trigger("onkeydown");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div  onkeydown="setCss( );"> </div>`

Muhammad Bilal
quelle

So fügen Sie einem div-Element ein Onload-Ereignis hinzu

Antworten:

Dritter Versuch (und endgültige Lösung)

Zweiter Versuch

Erster Versuch