Ich habe diesen Codeausschnitt, der meiner Seite ein neues Div hinzufügt.

$(document).on('click', '#addLayer', function(e) {

        $('.layer').removeClass('selectedLayer');
        var nl = $('<div class="layer selectedLayer" data-arc="1100">New Layer</div>').insertAfter('.layer');
        nl.arctext({radius: 1100});
        nl.resizable({handles: "nw,sw,se,ne"}).draggable().rotatable({ handles: "s"});
        $('#bead-text').val('New Layer');

    });

Das erste Mal, wenn es aufgerufen wird, funktioniert es perfekt. Beim zweiten Mal werden anstelle von nur einem Div 2 mit einem Klick hinzugefügt. Das dritte Mal, wenn ich darauf klicke, werden 4 mit 1 Klick hinzugefügt. Irgendeine Idee, wie ich das beheben kann, damit nur einer nach dem anderen hinzugefügt wird?

0
Clint C. 27 Nov. 2013 im 00:02

3 Antworten

Beste Antwort

Dies liegt daran, dass Ihr Selektor .layer nach Ihrer ersten Hinzufügung mehrere Elemente zurückgibt und daher für jedes Element eines hinzufügt. Verwenden Sie also .layer:last

Versuchen:

$('<div class="layer selectedLayer" data-arc="1100">New Layer</div>').insertAfter('.layer:last');

Demo

3
PSL 26 Nov. 2013 im 20:04

Nun haben Sie jetzt zwei .Layer nach dem ersten Klick. Also, wenn du es tust

$('<div class="layer selectedLayer" data-arc="1100">New Layer</div>').insertAfter('.layer');

Sie fügen dieses Element pro Ebene ein.

0
mitch 26 Nov. 2013 im 20:05

Ich würde empfehlen, zuerst auf das Element abzuzielen und danach wie folgt hinzuzufügen:

var html = '<div class="layer selectedLayer" data-arc="1100">New Layer</div>';

// select the last element with .layer and put HTML after it
var nl = $('.layer').last().after(html);
0
MonkeyZeus 26 Nov. 2013 im 20:09