0

当我点击下面的链接时，下面的代码有问题（从下面的完整代码中提取）

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

1 回答 1

1

问题源于.on在 jquery 1.4 中的使用，因为它仅按照自 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。.live已在 jquery 1.4.3 中弃用

于 2013-11-07T17:54:45.097 回答