Javascript 动态创建文本字段会导致重复_Javascript_Jquery_Html

Javascript 动态创建文本字段会导致重复

javascript jquery html

Javascript 动态创建文本字段会导致重复,javascript,jquery,html,Javascript,Jquery,Html,我对下面的代码有问题，当我点击下面的链接时，（摘自下面的完整代码）它将动态创建一个输入文本字段。。。问题是它创建了两个输入字段，我不明白为什么您应该能够用下面的代码复制问题 <!DOCTYPE html <html lang="en"> <head> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="/js/jqu

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

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

您应该能够用下面的代码复制问题

<!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>

1）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});
});
jQuery（函数（$）{
var jcrop_api；
$（'#target'）.Jcrop({
onChange:showCoords，
onSelect:showCoords，
onRelease:clearCoords
}，函数（）{
jcrop_api=这个；
});
$（'#coords'）。关于（'change'，'input'，函数（e）{
var x1=$（'#x1'）.val（），
x2=$（'#x2'）.val（），
y1=$（'#y1'）.val（），
y2=$（'#y2'）.val（）；
jcrop_api.setSelect（[x1，y1，x2，y2]）；
});
});
函数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）；
};
函数clearCoords（）
{
$（'coords input'）.val（''）；
};
备用URL

问题源于在jQuery1.4中使用

.on

，因为它只在jQuery1.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的更新版本

.live

在jquery 1.4.3中已经被弃用了

花些时间格式化和缩进代码。另外，只发布相关代码。在jsfiddle.net中创建一个复制问题的演示是否有充分的理由使用jquery1.4？它现在已经很过时了，live已被弃用并替换为“on”委托，因为live的性能太差了。感谢这就是问题所在，我正在合并从web上找到的示例，一个使用1.4.3，另一个使用1.9版。我想这就解释了on和live的用法。

$('#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]);
});