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

【问题标题】：why document.ready() dont work after fetching data with ajax in div element?为什么在 div 元素中使用 ajax 获取数据后 document.ready() 不起作用？
【发布时间】：2015-08-29 22:31:34
【问题描述】：

我使用这个 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>

现在一切正常，当用户单击“添加框”按钮时，会出现另一个框，当用户单击“删除它”按钮时，会删除一个框。

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

【问题讨论】：

标签： document-ready

【解决方案1】：

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

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

没有正确使用“结果”。应该是+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 元素有效。

因此，在这种情况下，“添加”处理程序将无法在您的 AJAX PHP 调用之后工作。

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

【讨论】：

测试不重要可以去掉
我添加了我的源代码并删除了一些代码。您可以下载并测试它。
请参阅上面的进一步评论 - 恐怕我不会从互联网上下载任何代码并在本地运行它:) （除了我没有你的 PHP/数据库设置的事实...)
感谢您的回答，但我删除了数据库调用和简单的代码。它只需要像 wampp 或 xampp 这样的 PHP 服务器来执行。
非常感谢 spudnick。这完全解决了我的问题。此外，如果您实际上更进一步并删除并重新添加 .my2-form div (#showresult12) 本身，那么这两个处理程序都不会起作用 - 您必须执行类似 $('body').on( '点击', '.my2-form .add2-box', function() {....

【解决方案2】：

感谢您的回答，但我的结果是从名为“showselectdatearray.php”的文件中获取的。你可以删除它并不重要

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

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

【讨论】：