OnClickが要素と連携していません

Question

アンカータグを作成してから、clickイベントハンドラを作成しますが、イベントは発生していません。私は、jQueryの構文が間違っていると思いますか？

var b = '<a class="dz-remove removeAttachment">Remove</a>'; 
var someOtherElement = $(dropZoneElement).find(".dz-file-preview")[0]; 
$(someOtherElement).append(b); 
$(b).on('click', function() { 
    dropone.removeAllFiles(); 
}) 

Answer 1

イベントを文字列にバインドすることはできません。

DOM要素にバインドする必要があります。ドキュメント全体をロードした後にDOM要素を追加するときは、 'delegate'を使用すると役立ちます。

これは動作するはずです：

var b = '<a class="dz-remove removeAttachment">Remove</a>'; 
$(someOtherElement).append(b); 
$(someOtherElement).delegate('.removeAttachment', 'click', function() { 
    dropone.removeAllFiles(); 
}) 

Answer 2

ヴァールbは、まだ文字列ではないDOM要素である、あなたは、クラスによって例えば挿入された要素を選択し、それにクリックイベントを割り当てる必要があります。

Answer 3

はこれを試してください：ここ$(someOtherElement).append(b)、ここ$(b).：

var b = '<a class="dz-remove removeAttachment">Remove</a>'; 
var someOtherElement = $(dropZoneElement).find(".dz-file-preview")[0]; 
$(someOtherElement).append(b); 
$(someOtherElement).find('a').on('click', function() { 
    dropone.removeAllFiles(); 
}) 

Answer 4

あなたの問題は、あなたは、実際には2つの独立したアンカー要素を作成することです。

下記のコードを使用してください。私はdroponeとdropZoneElementがこのスニペットの上のどこかで定義されていると思います。

var $b = $('<a class="dz-remove removeAttachment">Remove</a>'); 
$b.click(function() { dropone.removeAllFiles(); }); 
$(dropZoneElement).find(".dz-file-preview:first").append($b); 

Answer 5

問題はvar bが文字列であることです。あなたがする必要があるのは、dom要素を作成し、その要素にイベントリスナーを追加することです。

変更var b HTML要素を作成し、var bにクリックイベントに追加したときに、それが正常に動作します

var b = $.parseHTML('<a class="dz-remove removeAttachment">Remove</a>'); // $.parseHTML is a jQuery method to create HTML from a string 

へ。

例：https://jsfiddle.net/5nx6u18n/

Answer 6

あなたは

$('.dz-remove').on('click', function() { 
    // your code.... 
}); 

と交換

$(b).on('click', function() { 
    dropone.removeAllFiles(); 
}); 

で簡単に実現することができ、あなたのすべてのコードがうまく機能している見ることができます:)

Answer 7

にあなたは」要素liを生成するための余分な作業をたくさん追加するそれ。さらに、コードが実行される方法にはいくつかの問題があります。最初に、2つの独立したアンカータグを作成しています（ここでは.append(b);、ここでは$(b)）。次に、作成した2番目のアンカータグにイベントハンドラをアタッチしていますが、そのタグをDOMに挿入していません。

ありがたいことに、これを修正できます。 jQuery Docsを参照すると、大部分の関数がjQueryを返すことがわかります。これは、コマンドを連鎖させてコードの複雑さを減らすことができるため、素晴らしいことです。次のことを試してみてください。

$('<a />', { "class": "dz-remove removeAttachment", text: "Remove" }) 
    .appendTo($(dropZoneElement).find(".dz-file-preview")) 
    .on('click', function() { 
     dropone.removeAllFiles(); 
    }); 

DEMO：

// Document Ready 
 
$(function() { 
 
    $('<a />', { "class": "dz-remove removeAttachment", text: "Remove" }) 
 
     .appendTo($('#dropzoneElement').find(".dz-file-preview")) 
 
     .on('click', function() { 
 
    \t   alert("I'm chained!"); 
 
     }); 
 
});

a { 
 
    display: block; 
 
    border: 1px solid red; 
 
    color: red; 
 
    padding: 5px 7px; 
 
    width: 70px; 
 
    text-align: center; 
 
    -webkit-transition: 0.3s; 
 
    -moz-transition: 0.3s; 
 
    -o-transition: 0.3s; 
 
    -ms-transition: 0.3s; 
 
    transition: 0.3s; 
 
} 
 
a:hover { 
 
    background: red; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dropzoneElement"> 
 
    <div class="dz-file-preview"></div> 
 
</div>