Question

我有一个带输入的表单：

 <form action="xyz" name="form" id="fc" method="GET" style="background:none;display:block">
 <div class="a" id="a"> 
 <div class="b"> 
 <div class="c" id="c"> 
 <input class="input" type="text" name="name">
 </div>
 <div class="c"> 
 <input class="input" type="text" name="email">
 </div>
 <div class="c"> 
 <input class="input" type="text" name="sub">
 </div>
 <div class="c"> 
 <input class="input" type="text" name="web">
 </div>
 </div>
 <input type="submit" name="submit" id="su" value=""> 
 </div>  
 </form>

不，当我专注于输入时，我想要那个，而不是

 var appender = '<div class="nxt"><div class="btn" name="button" id="btn">A</div></div>';

在此输入的div之后添加。

||---------------------|A| [ <div>||----------|</div> |a| ]
|----------------------|
|----------------------|
|----------------------|

|----------------------|
||---------------------|A|
|----------------------|
|----------------------|

|----------------------|
|----------------------|
||---------------------|A|
|----------------------|

|----------------------|
|----------------------|
|----------------------|
||---------------------|A|

目前我正在使用此代码：

 var any = {
 init: function(){
 var btn = $("#btn");
 var input = $('input');
 var appender = '<div class="nxt"><div class="btn" name="button" id="btn">A</div></div>';
input.focus(function(){
    $(this).parent().parent().append(appender);
});
input.blur(function(){
    if(input.val().length == 0){
        $(this).parent().parent().find(".nxt").remove();
    }else{
        $(this).parent().parent().find(".nxt").css("display","block");
    }
});

btn.live("click",function(){
    input.val('');  
    btn.css("display","none");
}); 
 }
 }
 $(document).ready(any.init);

但是这段代码只会将这个'appender'附加到第一个输入。

任何人都可以为我提供一个很好的解决方案......

Answer 1

检查一下，让我知道我是否理解：

http://jsfiddle.net/6KZu8/

input.focus(function(){
    $(this).parent().append(appender);
});

Answer 2

    var any = {
    init: function () {
        var $appender = $('<div class="nxt"><div class="btn" name="button" id="btn">A</div></div>');
        $('input').focus(function () {
            $appender.insertAfter($(this).parent());
        });
    }
}
$(document).ready(any.init);

DEMO：http://fiddle.jshell.net/Pisi2012/kDwb8/

如果有多个输入具有相同的类，如何使用jquery'append'在'焦点'输入后添加div？

2 个答案: