Append Див более чем один раз с помощью JQuery

Question

http://jsfiddle.net/sF5av/1/

я есть

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

и когда «Добавить еще Аннет» нажмите, я хочу разместить один и тот же контент в сНу «anettedata». Я сделал это с помощью следующей JQuery

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

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

Моя проблема заключается в том, что, когда я снова нажмите на вновь созданной кнопке «Добавить еще Аннет» я хочу, чтобы поместить то же самое содержание ниже только что созданный дела. Как я могу переписать этот jquery и html для решения этой проблемы, пожалуйста, помогите мне.

и у меня есть еще один вопрос, когда добавить новый набор DIV, как мы можем удалить «Добавить еще Аннет» кнопку от предыдущих

Answer 1

Используйте событие делегации.

Метод .on() привязывает обработчики событий к выбранному в данный момент набору элементов в объекте jQuery.

Запись: метод .он

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

Updated fiddle here.

Refer this document.

Answer 2

Вы должны использовать delgation событие с

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

DEMO

Answer 3

Использование on() для динамически добавленных элементов, таких как,

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

Demo

Обновлено для удаления ранее добавлена ​​кнопка попробовать это,

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

Updated Demo

Answer 4

Используйте JQuery, так что она будет связывать события добавляются элементы тоже.

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

Выше кода свяжет функцию со всеми элементами с классом «.btnAdd» в документе.