为什么 document.ready() 在 div 元素中使用 ajax 获取数据后不工作？

Question

我使用这个 jQuery 函数在我的页面上添加和删除框时遇到问题：

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 + '&nbsp;&nbsp;&nbsp;&nbsp;</span></label> <input type="text" name="boxes[]" value="" id="box' + n + '" size="8" />&nbsp;&nbsp;&nbsp;&nbsp;'+result<a href="#" class="remove2-box">removeitem</a></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' );
});

然后我以这种方式在我的代码中使用上面的脚本：

<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&nbsp;&nbsp;&nbsp;&nbsp;</span></label>
            <input type="text" name="boxes[]" value="" id="box" size="8" />&nbsp;&nbsp;&nbsp;
            <?php Show_Select_Date_Array("months",0,0,0,93) ?>
        </p>
   </div>
</div>

现在一切正常，当用户单击 "add box" 按钮时，会出现另一个框，当用户单击 "remove it" 按钮时，会删除一个框。

我在此代码下还有另一部分 -part2- 从数据库中获取。用户单击位于 -part2- 中的 "edit" 按钮后，信息从数据库提取到带有 php 代码的框，但我的添加和删除按钮根本不起作用。我的信息使用 Ajax 获取并替换为新框。 'showresult12' div id 使用相同的数据再次完全加载。
替换 div 元素后出现了什么问题？！我必须在我的 jquery 代码中做些什么更改才能在 div 再次加载后正常工作？

Answer 1

在你的 'var box_html=...' 行中，在我看来有一点语法错误：

&nbsp;&nbsp;&nbsp;&nbsp;'+result<a href="#" class="remove2-box">removeitem</a></p>');

其中 'result' 未正确使用。应该是 +result+'<a href... 吗？

编辑：如果你说你的 'showresult12' div 被清空然后动态重新填充，那么你的 'add' 事件处理程序将永远无效 - 它没有像使用委托'remove' 一个。

$('.my2-form').on('click', '.remove2-box', function(){ - 这没关系，因为它适用于动态创建的 .remove2-box 元素。

$('.my2-form .add2-box').click(function(){... - 但这不是，因为它仅对创建此处理程序时存在于 DOM 中的 .add2-box 元素有效。

所以在这种情况下，'add' 处理程序在您的 AJAX PHP 调用后将不起作用。

此外，如果您实际上要进一步删除并重新添加 .my2-form div (#showresult12) 本身，那么两个处理程序都不会工作 - 您必须执行类似$('body').on('click', '.my2-form .add2-box', function() {....

Answer 2

感谢您的回答，但我的结果是从名称为 "showselectdatearray.php" 的文件中获取的。删除这个并不重要

$.post('showselectdatearray.php', { type: 'months', year: 93}, function(result) {

AND 结果变量在：    '+result<a href="#"

为什么 document.ready() 在 div 元素中使用 ajax 获取数据后不工作？

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

document-ready