Question

我的jQuery函数有问题，我用它来添加和删除我的页面框：

＆＃13;

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' );
});

＆＃13;

然后我在我的代码中使用上面的脚本：

＆＃13;

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

＆＃13;

＆＃13; 现在一切都很好，当用户点击＆＃34;添加框＆＃34;按钮，出现另一个框，当用户点击＆＃34时，将其删除＆＃34;按钮，一个框删除。

我在此代码下有另一部分-part2-从数据库中获取。用户点击＆＃34;编辑＆＃34;位于-part2-的按钮，信息从数据库获取到带有PHP代码的框，但我的添加和删除按钮根本不起作用。我用Ajax获取信息并在新框中替换。＆＃39; showresult12＆＃39; 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元素有效。

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

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

Answer 2

感谢您的回答，但我的结果是从名为＆＃34; showselectdatearray.php＆＃34;的文件中获取的。你可以删除这个

并不重要

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

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

为什么document.ready（）在div元素中使用ajax获取数据后不起作用？

2 个答案: