why document.ready() dont work after fetching data with ajax in div element? - document-ready

Question

I have a problem with this jQuery function that i use for add and remove box to my page:
jQuery(document).ready(function($){
$('.my2-form .add2-box').click(function(){
var n = $('.text2-box').length + 1;
if( 12 < n ) {
alert('you can't make more than 12 box');
return false;
}
$.post('showselectdatearray.php', { type: 'months', year: 93}, function(result) {
var box_html = $('<p class="text2-box" style="padding: 0px; margin: 0px;"><label for="box' + n + '"><span class="box2-number">' + n + ' </span></label> <input type="text" name="boxes[]" value="" id="box' + n + '" size="8" /> '+resultremoveitem</p>');
box_html.hide();
$('.my2-form p.text2-box:last').after(box_html);
box_html.fadeIn('slow');
box_html.css( 'background-color', '#48b973' );
return false; });
});
$('.my2-form').on('click', '.remove2-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box2-number').each(function(index){
var p =index+1;
var str = p+'\xa0\xa0\xa0\xa0';
$(this).text( str );
});
});
return false;
});
$('.my2-form p.text2-box:last').css( 'background-color', '#FFFFFF' );
});
then i use from above script in my code this way:
<div id="showresult12" class="my2-form">
<div>
<input type='button' id='AddMore' name='AddMore' value='add box' class='add2-box' />
</div>
<div style="float: right;" class="scroll10">
<p class="text2-box" style="padding: 0px; margin: 0px;">
<label for="box"><span class="box2-number">1 </span></label>
<input type="text" name="boxes[]" value="" id="box" size="8" />
<?php Show_Select_Date_Array("months",0,0,0,93) ?>
</p>
</div>
</div>
Every thing is OK now and when user click on "add box" button, another box appear and when user click on "remove it" button, one box remove.
I have another part -part2- under this code that fetch from database. after user click on "edit" button that is locate in -part2-, information fetch from database to boxes with php code, but my add and remove button don't work at all. my information fetch with Ajax and replace in new boxes. the 'showresult12' div id completely load again with same data.
what is the problem after replacing div element?!
and what change i must do in my jquery code that it work after div load again?

Answer 1

In your 'var box_html=...' line, there looks to me to be a bit of a syntax error:
'+resultremoveitem</p>');
where 'result' isn't used properly. Should it be something like +result+'<a href... ?
EDIT: If as you say your 'showresult12' div is being emptied and then refilled again dynamically, then your 'add' event handler will always be invalid - it's not using delegation like the 'remove' one.
$('.my2-form').on('click', '.remove2-box', function(){ - this is OK, as it will work for dynamically-created .remove2-box elements.
$('.my2-form .add2-box').click(function(){... - however this is not, as it is only valid for .add2-box elements that were present in the DOM when this handler was created.
So in this scenario, the 'add' hander will not work following your AJAX PHP call.
Furthermore, if you are actually going further and removing and re-adding the .my2-form div (#showresult12) itself, then neither of the handlers will work - you would have to do something like $('body').on('click', '.my2-form .add2-box', function() {....

Answer 2

thanks for your answer but my result fetch from file with name "showselectdatearray.php". it is not important you can remove this
$.post('showselectdatearray.php', { type: 'months', year: 93}, function(result) {
AND result variable in : '+result<a href="#"