Question

我正在尝试使用子输入附加div（这很好）但是我无法将新附加的输入添加到'focus'。

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap_ex1"); //Fields wrapper
    var add_button      = $(".add_field_button_ex1"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(this).parent().parent().append('<div id="setsdiv" class="col-xs-12 text-center"><div class="col-xs-8"><input id="set" class="form-control input-sm setinput text-center" type="text" name="ex1[]" placeholder="W / R" pattern="\\d*"></div><div class="col-xs-4"><a class="btn btn-xs btn-default remove_field  pull-right">Remove</a></div></div>'); //add input box
        }

    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').parent('div').remove(); x--;
    })

});

'setsdiv'正在追加，但我无法使用ID'set'来聚焦输入。

请记住，我不能只设置.focus（'set'），因为我可能有多个，我追加的更多。

Answer 1

尝试使用变量x连接到附加id，div元素的input以避免重复id;对.focus()个input元素调用id，x以变量var x = 1; $(add_button).click(function(e){ //on add input button click e.preventDefault(); if(x < max_fields){ //max input box allowed $(this).parent().parent() .append('<div id="setsdiv"'+x+' class="col-xs-12 text-center"><div class="col-xs-8"><input id="set"'+x+' class="form-control input-sm setinput text-center" type="text" name="ex1[]" placeholder="W / R" pattern="\\d*"></div><div class="col-xs-4"><a class="btn btn-xs btn-default remove_field pull-right">Remove</a></div></div>') //add input box .find("input[type=text][id$="+x+"]").focus(); x++; //text box increment; } });结尾;增量变量

var x = 1, html = "<div id=abc"+x+"><input type=text id=def"+x+" /></div>";
$("body").append(html).find("input[type=text][id$="+x+"]").focus()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
</script>

＆＃13;

collect

＆＃13;

Answer 2

正如其他人所提到的，在这里使用classes而不是ids更为简单。然后你可以使用类似.find('.set:last').focus();的东西来设置焦点在那个类的最后一个元素上，这个元素就是你刚刚添加的元素。

不知道HTML的结构如何，下面是一个应该说明这个概念的例子：

$(document).ready(function () {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap_ex1"); //Fields wrapper
    var add_button = $(".add_field_button_ex1"); //Add button 
    $(add_button).click(function (e) { //on add input button click
        
        e.preventDefault();
        if ($('.setsdiv').length < max_fields) { //max input box allowed
            $container=$(this).parent().parent();
            $container.append('<div class="col-xs-12 text-center setsdiv"><div class="col-xs-8"><input class="form-control input-sm setinput text-center set" type="text" name="ex1[]" placeholder="W / R" pattern="\\d*"></div><div class="col-xs-4"><a class="btn btn-xs btn-default remove_field  pull-right">Remove</a></div></div>'); //add input box
            $container.find('.set:last').focus();
        }
    });
    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
        e.preventDefault();
        $(this).closest('.setsdiv').remove();
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap_ex1">
    <div>
        <button class="add_field_button_ex1">Add</button>
    </div>
</div>

追加然后专注于子输入查询

2 个答案: