eine Append mit

Klick entfernen

Ich habe den folgenden Code: Html:eine Append mit

<body> 
     <div> 
     <p class='Go'> 
      Create 
     </p> 
     <p class='Del'> 
     Remove 
     </p> 
     </div> 
    </body>

CSS:

.Go{ 
    background-color: lime; 
    width:45px; 
    text-align: center; 
} 
.bad{ 
    background-color:Red; 
    width: 45px; 
    text-align:center; 
} 
.Del{ 
    background-color:pink; 
    width: 55px; 
}

Javascript (jQuery)

$(document).ready(function(){ 
    $('.Go').click(function(){ 
     $('div').append("<p class='bad'>Delete</p>"); 
    }); 
    $('.bad').click(function(){ 
     $(this).remove(); 
    }); 
    $('.Del').click(function(){ 
     $('.bad').remove(); 
    }) 
});

Die Idee war, dass jedes Mal, Ich habe auf "create" geklickt, es wurde ein neues "delete" hinzugefügt.

Jedes Mal, wenn ich auf "Entfernen" klickte, verschwanden alle "Löschen" -Elemente, und jedes Mal, wenn ich auf "Löschen" klickte, wurde dieses einzelne Löschen entfernt.

Alle außer dem letzten funktioniert. Irgendwelche Ideen, welchen Fehler mache ich hier?

Quelle

2017-08-22 Lucian cahil

es ist, weil die 'delete' Elemente hinzugefügt werden, nachdem die Seite geladen wird, aber die' .click' an nichts gebunden ist, da es kein 'bad' divs ist, wenn die Seite geladen wird. – tima

Was ist, wenn Sie den Teil, den Sie in einem div entfernen möchten. Wenn du also auf "Alles entfernen" klickst, wird das div gelöscht. –

In diesem Fall können Sie den jQuery-Klick nicht an ein Element binden, das noch nicht existiert. Sie binden den Klick nur an $ (document) .ready(). Um dies zu verhindern, binden Sie den gewünschten Löschvorgang an ein Element, das während der Dokumentbereitstellungsfunktion vorhanden ist.

Dies besagt, wenn das Objekt angeklickt wird, wenn das Ereignisziel eine Klasse von .bad hat, löschen Sie es. Auf diese Weise ist das jQuery-Ereignis korrekt gebunden.

Arbeitsbeispiel hier: https://jsfiddle.net/xexhdfzw/1/

Quelle

2017-08-22 02:17:18 Beaut

eine Append mit

Antwort

Verwandte Themen