• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JQUERY] Jquery Ereignis nach append()

J

jaxxon1

New member
Guten Abend allerseits,

ich versuche hoffnungslos mit Jquery folgendes zu realisieren:

ich habe zB eine html liste mit 5 Punkten, alle mit class="point".
jetzt will ich mit der click funktion und append() weitere punkte erstellen, die ebenfalls der klasse="point" sind. Das klappt auch alles, jedoch kann ich dann auf die mit append erstellten
Punkte nicht nicht auch klicken, um weitere punkte zu erstellen.

Das ist nur ein theoretisches Beispiel, um mein Problem näher zu erläutern.
Ich vermute, dass ich nicht die mit append() erstellen Punkte zugreifen kann,
hat mit document Ready zutun, weil ich ja sozusagen mit append() der quellcode erweiter,
auf den ich wiederrum dann nicht zugreifen kann, bin mir aber nicht sicher

Ich hoffe ich hab mein problem eindeutig erklärt und das mir jemand eine Antwort darauf geben kann.

Mfg
 
Ich vermute du meinst folgendes Problem:
Wenn du dynamisch Inhalte hinzufügst, dann kannst du zb. nicht auf onClick-Events zurück greifen.
Das liegt daran, dass für diese Inhalte dann das onclick-event nicht für diese Class registriert ist.
Ist etwas schwer zu erklären.
Aber wenn dies dein Problem ist, dann kann ich auch gerne die Lösung dazu posten.
 
Die Lösung ist, dass du nicht das herkömliche "onclick" zum Event Registrieren verwenden darfst sondern "on" verwenden musst.

.on() | jQuery API Documentation

Hier ein Beispiel aus der Doku welches es relativ gut erklärt:
Code: 
<!doctype html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Click me!</p>
<span></span>
 
<script>
var count = 0;
$( "body" ).on( "click", "p", function() {
  $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
});
</script>
 
</body>
</html>
 
das habe ich ja so gemacht, geht aber nicht:(

Code: 
$(document).ready(function(){
		var i = 0;

    $('.uk-panel.uk-panel-box').click(function(){
		if ( $(".border").length) {
		    $(this).removeClass('border');
		}else{
		    $(this).addClass('border');
		}
    });
		
    $('body').on('click','#addRow', function(){
				
        if ($(".border").length) {
        	$('.border').html('Aktion gesetzt');
        	$(".clTableEditorBody").append("<div id='"+i+"' class=\"uk-grid clCurrentRow\">" +
    			"<div class=\"td uk-width-1-5\"><div class=\"uk-panel uk-panel-box\"> </div></div>" +
    			"<div class=\"td uk-width-1-5\"><div class=\"uk-panel uk-panel-box\"> </div></div>" +
    			"<div class=\"td uk-width-1-5\"><div class=\"uk-panel uk-panel-box\"> </div></div>" +
    			"<div class=\"td uk-width-1-5\"><div class=\"uk-panel uk-panel-box\"> </div></div>" +
    			"<div class=\"td uk-width-1-5\"><div class=\"uk-panel uk-panel-box\"> </div></div>" +
    			"</div>");
        }
	i++;
     });
});

also ich Drücke auf ein Element, es wird umrandet, dann mit #addRow wird eine neue Reihe von Elementen erstellt,
die kann ich aber leider dann nicht mehr anklicken...
 
Code: 
<body>
  <div class="uk-grid">
    <div class="uk-width-7-10">
	<div data-id="1" class="clTableEditorBody">
	  <div class="uk-grid">
		<div class="uk-width-1-5">Rolle 1</div>
		<div class="uk-width-1-5">Rolle 2</div>
		<div class="uk-width-1-5">Rolle 3</div>
		<div class="uk-width-1-5">Rolle 4</div>
		<div class="uk-width-1-5">Rolle 5</div>
	</div>
	<hr>
	<div class="uk-grid clCurrentRow">
	   <div class="td uk-width-1-5"><div class="uk-panel uk-panel-box"> </div></div>
          <div class="td uk-width-1-5"><div class="uk-panel uk-panel-box"> </div></div>
	  <div class="td uk-width-1-5"><div class="uk-panel uk-panel-box"> </div></div>
	  <div class="td uk-width-1-5"><div class="uk-panel uk-panel-box"> </div></div>
	  <div class="td uk-width-1-5"><div class="uk-panel uk-panel-box"> </div></div>
	 </div>
        </div>   
     </div>
    <div class="uk-width-3-10">
    	<span id="addRow"><h2>Variable Setzen</h2></span>
    </div>

    </div>
	</body>
 
Zuletzt bearbeitet:
Bin jetzt nur am Handy, deswegen ist es etwas schwer zu lesen, aber so wie ich es sehe muss dein Problem wo anders liegen.
Und du benötigt auch kein "on" da der Teil mit der ID "addRow" nicht dynamisch erzeugt wird.

Du willst ja nur bei jedem click einen HTML Block an einen bestehenden dran hängen.
Würde es vlt auch mit "clone" versuchen.
Aber Details kann ich erst sagen wenn ich am Rechner sitze.
 
Das Funktioniert ja, der wird unten dran gehangen. Nur leider funktioniert das Click Event mit dem umranden nicht bei den neuen HTML blöcken
 
Weil du hier statt dem click auch ein "on" benötigst.

Code: 
    $('.uk-panel.uk-panel-box').click(function(){
		if ( $(".border").length) {
		    $(this).removeClass('border');
		}else{
		    $(this).addClass('border');
		}
    });

Kann ggf morgen den gesamten code posten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben