o'clockイベントを追加するにはjQueryを使用してhtmlコードを追加しますか？以下

Question

は、このjQueryのコードを使用しているとき、私は私のページで正しいのdivのスタイルを取得することができます

$('#DocUploadDiv').append(
    '<div class="uploadClick" style="float:left; margin-right: 10px; margin-bottom: 10px">' + 
    '<i class="fa fa-times fa-remove"></i>' + 
    '<i class="fa fa-plus-circle fa-2x" onclick="$("#DocUpload").click()"></i>' + 
    '<div>' 
); 

...ページにいくつかのHTMLを追加しようとしている私のコードです。

ただし、onclickイベントは機能しません。

jQueryを使用してhtmlコードを追加するときにonclickイベントを追加するにはどうすればよいですか？

Answer 1

引用符をご覧ください。あなたは持っています

`'....onclick="$("#DocUpload").click()"...` 

この属性はどこで終了しますか？回答：ここに：

`'....onclick="$("#DocUpload").click()"...` 
// --------------^ 

それは開口部"後の最初の"だからです。

あなたは、少なくとも2つの方法でそれを修正することができます：'を使用して、それをエスケープすること（これはすべての'で区切られた文字列であるため）：

`'....onclick="$(\'#DocUpload\').click()"...` 
// --------------^^----------^^ 

またはonxyzハンドラ内のテキストがされているのでHTML（人々がいることを忘れがちであるが）、あなたは名前付き文字実体"使用することができます

`'....onclick="$("#DocUpload").click()"...` 
// --------------^^^^^^----------^^^^^^ 

を

しかしより良いまだは、近代的なイベント処理を使用することです：完全

onclick属性は、このようなtrigger-upload

として、そのi要素に意味クラスを追加

1. ディッチを

   代理処理の使用：

   $(document).on("click", "#DocUploadDiv .trigger-upload", function() { 
       $("#DocUpload").click(); 
   }); 
   

そのは、両方の要素ではなく、合成クリック行うよりも、同じ関数を呼び出す持っているだろうよりも優れ：

$(document).on("click", "#DocUploadDiv .trigger-upload, #DocUpload", function() { 
    // Do whatever you're doing in the #DocUpload click handler now 
});