0

以下のリンクをクリックすると、以下のコードで問題が発生します (以下の完全なコードからの抜粋)。

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

入力テキストフィールドを動的に作成します...問題は、2つの入力フィールドを作成することですが、その理由がわかりませんか?

以下のコードで問題を再現できるはずです。

<!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.7 以降、一般的に理解されているようにしか機能しないため、jquery 1.4 での使用に起因します。の取り外し

$('#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.liveですでに廃止されました

于 2013-11-07T17:54:45.097 に答える