jQueryの変化値が、私は次のような問題持っているHTML要素

Question

を生成：

を私は正常に動作はJQuery onbuttonclickでHTML要素を生成します。

<div id="maindiv"> 
<div id="formdiv"> 
    <form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> 
     First Field is Compulsory. Only JPEG,PNG,JPG Type Image Uploaded. Image Size Should Be Less Than 10MB.<br/><br/> 
    <div id="filediv"> 
     <input name="imagetitle" type="text" class="imagetitle" placeholder="Choose image title" value=""><br> 
     <input name="file[]" type="file" id="file"/><br><br> 
    </div> 
     <input type="button" id="add_more" class="upload" value="Add More Files"/> 
     <input type="submit" value="Upload File" name="submit" id="upload" class="upload"/> 
    </form> 

    <?php include "upload.php"; ?> 
</div> 
</div> 

そう要素が、私はそれらを生成することにしたいgeneratedlikeされます。

$(document).ready(function() { 
$('#add_more').click(function() { 
    $(this).before($("<div/>", { 
     id: 'filediv' 
    }).fadeIn('slow').append($("<input/>", { 
     name: 'file[]', 
     type: 'file', 
     id: 'file' 
    }), $("<br/><br/>"))); 
}); 

HTMLは次のようになります。 これで、ユーザーがテキストを変更したときにHTMLの "value"属性を変更したいと思います。

$('.imagetitle').change(function(){ 
    var text = $(this).val(); 
    $(this).val(text); 
    $(this).attr("value", text); 
}); 

私は2番目のHTML InputBox関数を生成し、新しいテキストを入力することで値を変更すると今の問題は...、それは変更されません。

これは、誰かがここに行くと何私れるものを私に説明できます最初の要素（値の作品を変更）

これは、2番目の要素は（動作しない）である

です間違いは？

事前に感謝します。

Answer 1

、あなたが動的に要素を追加しましたイベントはth番目にトリガされません

$('body').on('change','.imagetitle',function(){ 
    var text = $(this).val(); 
    $(this).val(text); 
    $(this).attr("value", text); 
}); 

は、ファイル入力からIDを削除するか、クラス

Answer 2

ここでの問題は、イベントの委任です。つまり、jQueryはページがロードされた後にイベントをバインドできません。

これと対処する方法は、代わりにon関数を使用することです。たとえば：jQueryの適切な要素に変更イベントをバインドできるようにする必要があり

$('.imagetitle').on('change', function(){ 
    var text = $(this).val(); 
    $(this).val(text); 
    $(this).attr("value", text); 
}); 

：

$('.imagetitle').change(function(){ 
    var text = $(this).val(); 
    $(this).val(text); 
    $(this).attr("value", text); 
}); 

は次のように変更することができます。

Answer 3

あなたのHTMLがDOM後に生成取得された場合に考慮すべき点がいくつには、Javaスクリプトを経由して準備があなたのような動的に追加された要素でイベントをバインドするイベントの委任を必要とする、すべての最初の、あります

$("#formdiv").on("change",".imagetitle",function(){ 
    var text = $(this).val(); 
    $(this).val(text); 
    $(this).attr("value", text); 
}); 

別のものの代わりにあなたのようなクラス属性を使用することができ、同じIDを持つ複数の要素をレンダリングしていない、それは無効なHTMLになる、ということですので、あなたの変更イベントを委任する

$(document).ready(function() { 
$('#add_more').click(function() { 
    $(this).before($("<div/>", { 
     class: 'filediv' // use class attribute instead 
    }).fadeIn('slow').append($("<input/>", { 
     name: 'file[]', 
     type: 'file', 
     id: 'file' 
    }), $("<br/><br/>"))); 
});