javascript - Append div more than one time using jquery - Stack Overflow

admin管理员组

文章数量:1295898

/

i have

<div id="anettedata">
     <div class="lbl">Annette Name</div><div class="txt"><input type="text" /></div>
     <input type="button" id="mybtn" class="btnAdd" value="Add Another Annette"  />
</div>
<div id="otheranettedata"></div>

and when the "Add Another Annette" click, i want place the same content in the div "anettedata". i have done this using the following jquery

$(document).ready(function () {
    var datatoappend='<div class="otherdata">.........<input type="text" /></div>'
    $('.btnAdd').click(function () {

        $('#otheranettedata').append(datatoappend); // end append        
    });
});

My problem is that when i am again click on the newly created button "Add Another Annette" i want to place the same content below the newly created div. How can i rewrite this jquery and html to solve this problem please help me.

and i have one more question, when add new set of div, how can we remove "Add Another Annette"button from previous ones

http://jsfiddle/sF5av/1/

i have

<div id="anettedata">
     <div class="lbl">Annette Name</div><div class="txt"><input type="text" /></div>
     <input type="button" id="mybtn" class="btnAdd" value="Add Another Annette"  />
</div>
<div id="otheranettedata"></div>

and when the "Add Another Annette" click, i want place the same content in the div "anettedata". i have done this using the following jquery

$(document).ready(function () {
    var datatoappend='<div class="otherdata">.........<input type="text" /></div>'
    $('.btnAdd').click(function () {

        $('#otheranettedata').append(datatoappend); // end append        
    });
});

My problem is that when i am again click on the newly created button "Add Another Annette" i want to place the same content below the newly created div. How can i rewrite this jquery and html to solve this problem please help me.

and i have one more question, when add new set of div, how can we remove "Add Another Annette"button from previous ones

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 3, 2014 at 7:50 neel asked Jan 3, 2014 at 7:31 neelneel 5,3031212 gold badges4949 silver badges6767 bronze badges 1

• 1 Be aware of that you're adding nodes with the same id as in your Fiddle. – Explicat Commented Jan 3, 2014 at 7:37

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Use event delegation.

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.

Write:

$(document).on('click','.btnAdd',function () {         
    $(document).find('.btnAdd').remove();  
    $('#otheranettedata').append(datatoappend); // end append        
});

Updated fiddle here.

Refer this document.

You need to use event delgation

$(document).on('click', '.btnAdd', function () {
    $('#otheranettedata').append(datatoappend); // end append        
});

DEMO

Use on() for dynamically added elements like,

$(document).on('click','.btnAdd',function () {
    $('#otheranettedata').append(datatoappend); // end append        
});

Demo

Updated to remove previously added button try this,

$('.btnAdd').length && $('.btnAdd').remove(); 

Updated Demo

Use jquery's .on method, so that it will bind events appended elements too.

$(document).on('click', '.btnAdd', function () {
    $('#otheranettedata').append(datatoappend);   
});

Above code will bind function to all elements with class '.btnAdd' in document.

本文标签： javascriptAppend div more than one time using jqueryStack Overflow