Bind-Methoden für angehängte Elemente

Ich habe eine AgentClass mit der Methode this.move. Es funktioniert mit statischen Objekten, aber wenn ich neue HTML-Objekte über .append() erstelle, kann ich sie nicht mit meiner this.move-Methode verwenden.Bind-Methoden für angehängte Elemente

Alle neuen Objekte haben eine ID und ich möchte sie mit der Methode move animieren.

Ich lese oft "live, on, ...", aber sie alle brauchen ein Ereignis ... Ich habe kein solches Ereignis auf ihnen. Sie bewegen sich direkt. Ich habe so etwas versucht:

$('.agents').on("load", Agent.move());

Aber das funktioniert nicht ... Irgendwelche Ideen?

Codesinppet:

var Agent = function(agentType, xTarget, yTarget) { 
    ... 
    this.move = function() { 
     var id = this.agentId; 

     $('.agent#'+id).animate({ 
      left:"200px" 
     }, 1000); 
    } 
}

Und ich sie danach wie folgt anhängen:

for (deployed = 0; deployed <= agents; deployed++) { 
    $('.agents').append('<div class="agent" id="'+deployed+'"></div>'); 
}

Es wäre fantastisch, wenn mir jemand helfen könnte !?

Quelle

2016-06-03 dessi

gibt es keine automatische Möglichkeit, dies zu tun. Die Delegierung funktioniert nur für Ereignisse. Für alles andere müssen Sie nur die Initialisierungsfunktion aufrufen, nachdem Sie die Elemente angehängt haben. – Barmar

Sie können .clone (true) Ein Boolean verwenden angibt, ob Event-Handler und Daten sollten zusammen mit den Elementen kopiert werden. Der Standardwert ist false.

var agents = 6; 
 
    for (deployed = 0; deployed <= agents; deployed++) { 
 
     $element = $('<div class="agent" id="'+deployed+'"></div>').clone(true); 
 
     $('.agents').append($element); 
 
    }

.agent { 
 
    height:50px; 
 
    width:50px; 
 
    background-color:yellow; 
 
    margin-bottom:10px 
 
}

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

 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Agent</title> 
 
</head> 
 

 
<body> 
 
    <div class="agents"> 
 
    </div> 
 
</body> 
 

 
</html>

Aber für maximale Optimierung Veranstaltung besser ist ein Event-Handler „auf“ verwenden, um die Elemente zu überwachen, die nach dem Neuladen der DOM hinzugefügt werden. Dies reserviert weniger Speicher

Quelle

2016-06-03 20:47:14

Vielen Dank! :) – dessi

Bind-Methoden für angehängte Elemente

Antwort

Verwandte Themen