Question

我遇到以下代码问题，当我点击下面的链接时，（摘自下面的完整代码）

    <a href="#" id="addScnt">Add Another Input Box</a>

它将动态创建一个输入文本字段...问题是它创建了两个输入字段，我不明白为什么？

您应该可以使用以下代码复制问题。

<!DOCTYPE html
 <html lang="en">
<head>

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="/js/jquery.Jcrop.js"></script>

<script type="text/javascript">




$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
$('<p><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
return false;
});

$('#remScnt').live('click', function() {
    if( i > 1  ) {
         $(this).parents('p').remove();
         i--;
}
return false;
 });
});

</script>

<script type="text/javascript">

jQuery(function($){

var jcrop_api;

$('#target').Jcrop({
onChange:   showCoords,
onSelect:   showCoords,
onRelease:  clearCoords
},function(){
jcrop_api = this;
 });

$('#coords').on('change','input',function(e){
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
 jcrop_api.setSelect([x1,y1,x2,y2]);
});

});

function showCoords(c)
 {
   $('#x1').val(c.x);
   $('#y1').val(c.y);
   $('#x2').val(c.x2);
       $('#y2').val(c.y2);
       $('#w').val(c.w);
   $('#h').val(c.h);
     };

             function clearCoords()
              {
        $('#coords input').val('');
              };


            </script> 


</head>
<body>






<form>
                    <table border=1 cellpadding="1" cellspacing="0"  width=80%>
                                            <tr><td colspan=2 align=center>
                                            <a href="#" id="addScnt">Add Another Input Box</a>
                                            </td>
                                            </tr>
                                            <tr><td valign=top>Alternate Urls
                                            </td>
                                            <td>
                                                    <div id="p_scents">
                                                    </div>

                                            </td>
                                            </tr>


                    </table>
</form>


</body>
</html>

Answer 1

问题源于在jquery 1.4中使用.on，因为它只是从jquery 1.7开始就被普遍理解。删除

$('#coords').on('change','input',function(e){
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1,y1,x2,y2]);
});

防止影响发生。

或者，切换到该事件的.live语法也可以防止出现问题..但是如果可以的话，你应该尝试使用更新版本的jquery。 jquery 1.4.3

中<{1>} 已弃用

动态创建文本字段重复出现

1 个答案: