Javascript 通过Jquery添加文本框在chrome中不起作用

在下面的代码中，我用来添加新的文本框，但这段代码在Google chrome中不起作用，它似乎在Firefox中起作用

<input type="submit" class="btn btn-success" name="btnSubmit" id="add-box" value="Add item" />

<script type="text/javascript">
jQuery(document).ready(function($){
    $('.control-group #add-box').click(function(){
        var n = $('.text-box').length + 1;
        if( 100 < n ) {
            alert('Stop it!');
            return false;
        }
        var box_html = $('<p class="text-box"> <input type="text" name="boxes[]" value="" id="box' + n + '" /><input type="text" name="boxes1[]" value="" id="box1' + n + '" /><input type="submit" class="btn btn-success" name="btnSubmit" id="remove-box" value="Remove item" /> </p>');
        box_html.hide();
        $('.control-group p.text-box:last').after(box_html);
        box_html.fadeIn('slow');
        return false;
    });
    $('.control-group').on('click', '#remove-box', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});
</script>

jQuery（文档）.ready（函数（$）{
$（'.控制组#添加框'）。单击（函数（）{
var n=$（'.text box'）。长度+1；
if（100
'）；
box_html.hide（）；
$（'.controlgroup p.text-box:last'）。在（box_html）之后；
box_html.fadeIn（'slow'）；
返回false；
});
$（'.control group'）。在（'单击'，'删除框'，函数（）上）{
$（this.parent（）.css（'background color'，'#FF6C6C'）；
$（this.parent（）.fadeOut（“slow”，function（））{
$（this.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
返回false；
});
});

因为在第一次单击时，chrome无法在（box_html）之后找到$（'.control group p.text-box:last'）；所以它不会附加任何东西等等

请更改您的代码如下

jQuery(document).ready(function($){
    $(' #add-box').click(function(){

        var n = $('.text-box').length + 1;

        if( 100 < n ) {            
            alert('Stop it!');
            return false;
        }
        var box_html = $('<p class="text-box"> <input type="text" name="boxes[]" value="" id="box' + n + '" /><input type="text" name="boxes1[]" value="" id="box1' + n + '" /><input type="submit" class="btn btn-success" name="btnSubmit" id="remove-box" value="Remove item" /> </p>');
        box_html.hide();
        if($('.control-group p.text-box:last').length>0) // if there is already then append after it.
            $('.control-group p.text-box:last').after(box_html);
        else
            $('body').append(box_html); // else add textboxes to body or your class below button

        box_html.fadeIn('slow');
        return false;
    });
    $('.control-group').on('click', '#remove-box', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});

jQuery（文档）.ready（函数（$）{
$（“#添加框”）。单击（函数（）{
var n=$（'.text box'）。长度+1；
如果（100
'）；
box_html.hide（）；
if（$（'.control group p.text-box:last'）.length>0）//如果已经存在，则在其后面追加。
$（'.controlgroup p.text-box:last'）。在（box_html）之后；
其他的
$（'body'）.append（box_html）；//否则将文本框添加到body或您的类下面的按钮
box_html.fadeIn（'slow'）；
返回false；
});
$（'.control group'）。在（'单击'，'删除框'，函数（）上）{
$（this.parent（）.css（'background color'，'#FF6C6C'）；
$（this.parent（）.fadeOut（“slow”，function（））{
$（this.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
返回false；
});
});

因为在第一次单击时，chrome无法在（box_html）之后找到$（'.control group p.text-box:last'）；所以它不会附加任何东西等等

请更改您的代码如下

jQuery(document).ready(function($){
    $(' #add-box').click(function(){

        var n = $('.text-box').length + 1;

        if( 100 < n ) {            
            alert('Stop it!');
            return false;
        }
        var box_html = $('<p class="text-box"> <input type="text" name="boxes[]" value="" id="box' + n + '" /><input type="text" name="boxes1[]" value="" id="box1' + n + '" /><input type="submit" class="btn btn-success" name="btnSubmit" id="remove-box" value="Remove item" /> </p>');
        box_html.hide();
        if($('.control-group p.text-box:last').length>0) // if there is already then append after it.
            $('.control-group p.text-box:last').after(box_html);
        else
            $('body').append(box_html); // else add textboxes to body or your class below button

        box_html.fadeIn('slow');
        return false;
    });
    $('.control-group').on('click', '#remove-box', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});

jQuery（文档）.ready（函数（$）{
$（“#添加框”）。单击（函数（）{
var n=$（'.text box'）。长度+1；
如果（100
'）；
box_html.hide（）；
if（$（'.control group p.text-box:last'）.length>0）//如果已经存在，则在其后面追加。
$（'.controlgroup p.text-box:last'）。在（box_html）之后；
其他的
$（'body'）.append（box_html）；//否则将文本框添加到body或您的类下面的按钮
box_html.fadeIn（'slow'）；
返回false；
});
$（'.control group'）。在（'单击'，'删除框'，函数（）上）{
$（this.parent（）.css（'background color'，'#FF6C6C'）；
$（this.parent（）.fadeOut（“slow”，function（））{
$（this.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
返回false；
});
});

通过查看您的代码，我认为您的问题在于重复的删除ID。请尝试以下操作：

$（“#添加框”）。单击（函数（）{
var n=$（'.text box'）。长度+1；
if（100
）；//更改删除按钮，使id唯一并添加一个类
$（'.control group'）.append（box_html.hide（））；//我刚刚为这个示例更改了这个选择器
box_html.fadeIn（'slow'）；
返回false；
});
$（'.control group'）。在（'click'，'.remove box'，function（）{//以类为目标（如果以重复id为目标，它将始终仅返回具有该id的第一个元素）
$（this）.parent（）.css（'background-color'，'#FF6C6C'）.fadeOut（“slow”，function（））{
$（this.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
返回false；
});
通过查看您的代码，我认为您的问题在于重复的删除ID。请尝试以下操作：


$（“#添加框”）。单击（函数（）{
var n=$（'.text box'）。长度+1；
if（100
）；//更改删除按钮，使id唯一并添加一个类
$（'.control group'）.append（box_html.hide（））；//我刚刚为这个示例更改了这个选择器
box_html.fadeIn（'slow'）；
返回false；
});
$（'.control group'）。在（'click'，'.remove box'，function（）{//以类为目标（如果以重复id为目标，它将始终仅返回具有该id的第一个元素）
$（this）.parent（）.css（'background-color'，'#FF6C6C'）.fadeOut（“slow”，function（））{
$（this.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
返回false；
});