Button-Duplikat funktioniert nicht in jquery?

Question

Ich habe eine Schaltfläche (dupe of existed) onclick der Schaltfläche vorhanden erstellt. Aber die neu erstellte Schaltfläche wird keine andere Schaltfläche erstellen, wenn ich klicke.

Hier ist mein Code

$('.add-more, .dropdown button').click(function(event){ 
    var elementToBeAdded; 
    if(event.target.nodeName === "IMG"){ 
     elementToBeAdded = event.target.parentElement.parentElement.parentElement.parentElement; 
    } 
    else if(event.target.nodeName === "BUTTON"){ 
     elementToBeAdded = event.target.parentElement.parentElement.parentElement; 
    } 
    else if(event.target.nodeName === "SPAN"){ 
     elementToBeAdded = event.target.parentElement.parentElement; 
    } 
    var newElement = elementToBeAdded.outerHTML; 
    newElement = newElement.slice(0, 5) + "style='margin-top:25px' " + newElement.slice(5, newElement.length); 
    newElement = $(newElement) 
    $(elementToBeAdded).parent().append(newElement); 
}) 

Der obige Code funktioniert gut und schafft die Betrogene Taste, aber der Betrogene ist nicht in der Lage, den Code auf Klick auszuführen. Bitte hilf mir.

Answer 1

Fügen Sie dem neuen Element den Click-Handler hinzu.

Es ist wahrscheinlich einfacher, die Hauptlogik in eine separate Funktion zu verschieben, damit Sie diese Funktion einfach als Click-Handler verwenden können.

Answer 2

, wenn das Element die gleiche Klasse dh .add-mehr und .dropdown und es ist ein Knopf, dann ist dies die Lösung

$('.add-more, .dropdown button').on('click', function(event){ 
    var elementToBeAdded; 
    if(event.target.nodeName === "IMG"){ 
     elementToBeAdded = event.target.parentElement.parentElement.parentElement.parentElement; 
    } 
    else if(event.target.nodeName === "BUTTON"){ 
     elementToBeAdded = event.target.parentElement.parentElement.parentElement; 
    } 
    else if(event.target.nodeName === "SPAN"){ 
     elementToBeAdded = event.target.parentElement.parentElement; 
    } 
    var newElement = elementToBeAdded.outerHTML; 
    newElement = newElement.slice(0, 5) + "style='margin-top:25px' " + newElement.slice(5, newElement.length); 
    newElement = $(newElement) 
    $(elementToBeAdded).parent().append(newElement); 
}) 

Answer 3

Wie in this gleiche gezeigt, bereits beantwortet, die Frage musst du Veranstaltung Delegation wie folgt verwenden:

$(document).on('click', '.add-more, .dropdown button', function(event){ 
    // ... 
}) 

Da dynamisch erstellt Elemenets dosen't jeden Event-Handler haben, wenn sie nicht mit ihnen verbunden sind, nachdem sie erstellt wurden. Anstatt also einen Event - Handler für die Elemente selbst zu erstellen, können Sie sie auf einem Element (einem Elternteil dieser Elemente) haben, von dem Sie sicher wissen, dass es immer dort sein wird (hier habe ich document verwendet, könnte es irgendein anderes Element sein Voraussetzung ist, dass es immer da sein muss). Sie hängen den Ereignishandler an dieses feste Element an (document) und sagen, dass, wenn ein Ereignis auftritt (erstes Argument), überprüfen Sie, ob das Zielelement dem Selektor entspricht (zweites Argument '.add-more, .dropdown button'), wenn ja, dann rufen Sie die Funktion auf (drittes Argument) auf diesem Element.

WARUM IST DYNAMISCH ERSTELLTES ELEMENT NICHT EVENT LISTENER?:

Weil dieser Code hier:

$('selector').click(function(){ 
    // ... 
}) 

alle Elemente auswählt, die den Wähler ('selector') und Schleife durch sie übereinstimmen (die ausgewählten Elemente) eine nach der anderen um die Funktion als ein Ereignis übergeben Zuweisen Listener, der die grundlegende JS-Funktion verwendet (addEventListener, attachEvent ...). Zu diesem Zeitpunkt, wenn dieser Code ausgeführt wird, sind Ihre zukünftigen dynamisch erstellten Elemente nicht vorhanden, sodass sie nicht an dieses Ereignis angehängt werden (weil sie noch nicht existieren). Und zu der Zeit, sie existieren, ist diese Zeile des Codes $('selector').click(...) bereits ausgeführt worden (weil Javascript Code-Anweisung nach der anderen ausführen, gibt es keine Rückkehr zu einer zuvor ausgeführten Anweisung). Eine weitere Überprüfung, ob neue Elemente gefunden werden, wird nicht passieren. Um zu verstehen, hier ist ein einfaches Java Script Beispiel:

function handleClick() { 
    alert("Yaay! A Click Happened!"); 
} 

// consider we have three .btn elements in DOM at this point 

var btns = document.querySelectorAll('.btn'); // three elements are selected 
btns.forEach(function(btn){ 
    btn.addEventListener('click', handleClick); // here too, just three elements get the event listener attached to them 
}); 

// now we create another .btn 
var div = document.creatElement('div'); 
div.className = '.btn': 

// we have never ever ever ever ... called .addEventListener on the last element so clicking it will have no effect at all. 

Answer 4

Ich habe dies auf eigene Faust getan. Es funktioniert.

var addBtns = document.querySelectorAll('.add-more, .dropdown button'); 
addClick(addBtns); 
function addClick(addBtns){ 
    Array.prototype.forEach.call(addBtns, function(addBtn) { 
     addBtn.addEventListener('click', addClickEvent); 
    }); 
} 

function addClickEvent(e){ 
    var elementToBeAdded; 
    if(event.target.nodeName === "IMG"){ 
     elementToBeAdded = event.target.parentElement.parentElement.parentElement.parentElement; 
    } 
    else if(event.target.nodeName === "BUTTON"){ 
     elementToBeAdded = event.target.parentElement.parentElement.parentElement; 
    } 
    else if(event.target.nodeName === "SPAN"){ 
     elementToBeAdded = event.target.parentElement.parentElement; 
    } else{ 
     return false; 
    } 
    var newElement = elementToBeAdded.outerHTML; 
    newElement = newElement.slice(0, 5) + "style='margin-top:25px' " + newElement.slice(5, newElement.length); 
    newElement = $(newElement) 
    $(elementToBeAdded).parent().append(newElement); 

    addClick(newElement); 
}