Question

为什么在两次点击此代码后一起添加多个输入？

$('.add_input').live('click', function () {
            var scntDiv = '.'+$(this).closest('div.find_input').find('div').attr('class');
            var i = $('.adding').size();
            var input = $(scntDiv).clone().wrap("<div>").parent().html();
            alert(scntDiv)
            $(scntDiv + ' .add_input').remove();            
            $(input).appendTo(scntDiv);
            $('<div><a href="" class="remove_input"></a></div>').appendTo('.add_in');
            $(scntDiv + ' .add_in div a:first').remove('')
            i++;
            return false;
        });

html :(我使用这个html两次）

<div class="column find_input">
    <div class="ai_service">
            <div class="column">
                <div class="mediumCell">
                    <input type="text" name="name" style="width: 160px;" placeholder="خدمات دیگر" title="نام پکیج تور خارجی">
                </div>
            </div>
            <div class="column" style="margin: 5px 3px;">
                <div class="mediumCell add_in">
                    <a href="" class="add_input"></a>
                </div>
            </div>
    </div>
</div>

Answer 1

试试这个

 $('a.add_input').live('click', function (e) {
    e.preventDefault();
    var $column = $(this).closest("div.column");
    var input = $column.prev("div.column").clone().wrap("<div />").parent().html();
    $column.before($(input));

});

Answer 2

嗯，如果您只是想添加一个额外的输入字段，那么您的代码似乎有点过于复杂......试试这个？

$('a.add_input').live('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $wrapper = $this.closest('div.find_input');
    var $input = $wrapper.find('input[name=name]').eq(0).clone();
    $wrapper.children('div').eq(0).append($input);
};

我没有复制代码中的所有内容，只是克隆/添加新输入。如果您发布了简化代码并且我的示例不适用，我道歉。另外，我想你想将克隆的输入附加到div.ai_service中吗？

就原始代码添加多个输入的原因而言，您经历的克隆过程可能首先克隆一个输入，添加它，再次克隆整个事物（2个输入），添加2，依此类推。您可以使用$（）。eq（0）将jQuery对象限制为它找到的与您的选择器匹配的第一个元素。

在jQuery中添加输入的问题

2 个答案: