jQueryを使用したjQueryの追加

Question

これは明らかにjQueryが気に入らないことをしようとしています。

私は写真をアップロードするためにjavascriptを使用しています。画像がアップロードされるたびに、画像が表示され、作業用の削除スクリプトが添付された状態になります。表示はうまく動作しますが、私は火かき棒でそれを検査するときにページに存在しないので、削除はしません。

これは、ファイル削除のためのスクリプトです：私のページで

var insertScript = "<"; 
insertScript += "script type='text/javascript'>jQuery(document).ready(function($){ $('#Remove_" + 
    file + "').click(function() { removeImage(\"" + 
    fileName +"\", \""+ imageUID +"\", \"" + 
    file + "\"); }); });"; 
    insertScript += "<"; 
    insertScript += "\/script>"; 

私はすべての画像を保持しているdivタグを持っているので、私はそれに画像がそのようなとしてアップロードされるたびに追加しています：

を

jQuery(document).ready(function($) { 
    $('#ImageBar').append(insertScript); 
    $('#ImageBar').append(insertHTML); 
}); 

insertHTML変数には、その内部の画像と削除ボタンが含まれたdivタグがあります。それにjavascript/jqueryはありません。それは良い追加します。 insertScriptはまったく追加しません。

jQueryをinsertScriptから削除し、単純なjavascriptアラートで置き換えて、それが混乱するタグであったかどうかをテストしました。追加されると、アラートは正常に機能しました。これは、jQueryがjQueryを追加することを好まないと私に信じさせる。これをやり遂げる別の方法がありますか？

Answer 1

イメージタグのデータ属性を使用して、画像に削除に必要なデータを保存することをお勧めします。次に、より近いボタンにクラスを与え、そのクラスの要素をハンドラー用にフィルターする文書レベルのハンドラーを使用することができます。ボタンの相対位置を使用して画像にアクセスします。あなたのページのスクリプトで

<span class="image-container"> 
<img data-filename="foo.png" data-imageuid="35" data-file="foo" ... /> 
<button class="remove-image">X</button> 
</span> 

：

<script type="text/javascript"> 
    $(function() { 
     $(document).on('click','.remove-image', function() { 
      var $button = $(this), 
       $img = $button.prev('img'), 
       $container = $button.closest('.image-container'); 
       removeImage($img.data('filename'), $img.data('imageuid'), $img.data('file')); 
       $container.remove(); 
     }); 
    }); 
</script> 

Answer 2

新しいjQueryコードを追加しないでください。代わりに、.onを使用して、新しく作成されたDOM要素に自動的に適用されるクリックイベントを追加します。

$('#container_div').on('click', 'img', function() { 
    $this = $(this); // the image that was clicked 
    // extract your fileName, imageUID, and file variables somehow from $this 
    removeImage(fileName, imageUID, file); 
}); 

Answer 3

私は "evalの行動のあらゆる種類のを避けるために誘惑されるだろう - のevalは悪です。これは、DOMに動的に書き込まれるHTMLタグの中にJavascriptを埋め込むことによって効果的に実行されます。 http://www.jslint.com/lint.html

はなぜちょうど...この種のアプローチに従って、あなたが作成している事業体に直接結合イベントハンドラを使用しないEvent binding on dynamically created elements and passing parameters