das on click event funktioniert nur einmal

Question

wenn ich auf das plusicondiv klicke ich füge das bild und die textbox hinzu und wenn ich auf das mynasicondiv klicke entfernt das bild und die textbox. Mein Problem ist das nächste Mal, wenn ich auf das plusiondiv klicke, füge das Bild und die Textbox nicht hinzu. Es passiert nur, die Seite zu aktualisieren und auf das Plusicondiv zu klicken.

$(function() { 
 
    $('.plusicondiv').on('click', function() { 
 
     
 
     var textBox = '<input type="text" class="textbox"/>'; 
 
     
 
     $('.box').append(textBox); 
 
     
 
     
 
     var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>'; 
 

 
     $('.box').append(img); 
 
     
 
    
 
    $(function() { 
 
     $(".mynasicondiv").on("click", function() { 
 
      $(this).parent(".box").remove(); 
 
     return 
 
     }) 
 
    }); 
 
    }); 
 
});

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

Answer 1

Verwendung $(document).on klicken für den dynamisch generierten dom Element Ereignisse

$(document).on('click','.mynasicondiv',function() { 
       $(this).parent(".box").empty(); 
      return 
}) 

Wenn Sie remove() box div, Sie img nicht zu spät anhängen können. Besser verwenden empty().box Behälter für innere Childs

Alle Code

$(function() { 
    $('.plusicondiv').on('click', function() { 

     var textBox = '<input type="text" class="textbox"/>'; 

     $('.box').append(textBox); 


     var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>'; 

     $('.box').append(img); 


    $(function() { 
     $(document).on("click",".mynasicondiv",function() { 
      $(this).parent(".box").empty(); 
     return 
     }) 
    }); 
    }); 
}); 

Answer 2

Sie verwenden $(function() { ...}) ineinander zu löschen, die nicht benötigt wird.

Hier ist $(".mynasicondiv") ein dynamisch erstelltes Element. Delegieren Sie also das Ereignis, das daran angehängt ist.

$(function() { 
    $('.plusicondiv').on('click', function() { 
    var textBox = '<input type="text" class="textbox"/>'; 
    $('.box').append(textBox); 
    var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>'; 
    $('.box').append(img); 
    }); 

    $("body").on("click", '.mynasicondiv', function() { 
    $(this).parent(".box").remove(); 
    return 
    }) 
}); 

Hinweis: Sie entfernen .box, so dass beim nächsten Mal, wenn Sie nicht in der Lage in DOM vorhanden textBox als .box gewohnt anhängen sein

Answer 3

Sie entfernen die .box div vollständig, das ist, warum Sie einen anderen Eingang nicht hinzufügen und Bild. Statt dies tun:

$('.plusicondiv').on('click', function() { 
 
    var textBox = '<input type="text" class="textbox"/>'; 
 
    $('.box').append(textBox); 
 
    var img = '<img class="mynasicondiv" src="https://placehold.it/350x150"></img>'; 
 
    $('.box').append(img); 
 
}); 
 
$("body").on("click", ".mynasicondiv", function(e) { 
 
    $(this).parent(".box").html(''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
</div> 
 
<div class="plusicondiv"> 
 
    click me 
 
</div>

Answer 4

Ich glaube, Sie wollen eine Funktionalität mehr neue Felder auf Klick hinzufügen. Ich schlage vor, unten jQuery-Plugin zu verwenden. [http://www.mdelrosso.com/sheepit/][1]

In Ihrem Code können Sie ersetzen statt

$(this).parent(".box").remove(); 

der folgende Code

$(this).(".box").html(''); 

weil remove() Funktion all HTML-Box Klasse entfernen