CODEWITHSUNDEEP
javascriptjquery
aswathy
aswathy

Reputation: 395

the on click event is working only one time

when i click the plusicondiv i want add the image and textbox and when click the mynasicondiv remove the image and textbox. my problem is next time i click the plusiondiv not add the image and text box.its only happen refreshing the page and click the plusicondiv. 

$(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>

Upvotes: 3

Views: 1485

Answers (4)

&#214;zg&#252;r Ersil
&#214;zg&#252;r Ersil

Reputation: 7013

use $(document).on click for the dynamically generated dom element events

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

If you remove() box div , you can not append img late. Better use empty() to clear .box container for inner childs

All 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
        })
    });
    });
});

Upvotes: 5

Harendra Singh
Harendra Singh

Reputation: 203

I think you want a functionality add more new fields on click. I am suggest to use below jQuery plugin. [http://www.mdelrosso.com/sheepit/][1]

In your code you can replace instead of 

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

the below code

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

because remove() function is remove all the box class html

Upvotes: 0

skobaljic
skobaljic

Reputation: 9614

You are removing the .box div completely, that's why you cannot add another input and image. Instead do this:

$('.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>

Upvotes: 0

brk
brk

Reputation: 50291

You are using $(function() { ...}) one inside another which is not needed.

Here $(".mynasicondiv") is a dynamically created element. So delegate the event attached to it.

$(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
  })
});

Note: You are removing .box, so next time you will not able to append textBoxas .box wont be present in DOM

Upvotes: 1

Related Questions