javascript - .on() の使用と特定の属性を持つ要素のターゲティング

Question

.on()シングル クリック イベントを要素にアタッチし、クリックを受け取る子要素を指定するために使用できることを理解しています。たとえば、次のようになります。

$(this.el).on("click", "span", function () {
    alert("Bloop!");
});

次のように、もう少し具体的にして、特定の属性を持つセレクターをターゲットにする必要があります。

$(this.el).on("click", "span[data-placeholder]", function () {
    alert("Bloop!");
});

しかし、それはうまくいかないようです。属性を追加するとすぐに機能しなくなります。エラーはありません。要素が見つからないようです。

それは期待される動作ですか？それを回避する方法はありますか？

明瞭さ

$(this.el)いくつかの要素を含む単なる div であり、その一部は<span data-placeholder="First Name"></span>タグです。これらの<span>タグは何十個もある可能性があり、それほど多くのイベント リスナーは必要ないので.on()、クリックを親コンテナーに追加するために使用すると考えました。

Answer 1

これは、既存<span>の s と新しく作成された s の両方で、あなたの例が機能していることを示すJSFiddleです。

明確にするために、これはイベントの委任で機能します。

var span = $('<span>Test</span>');
span.attr('data-placeholder', 'test'); // declare as an attribute
$(this.el).append(span);
span.click();

これはしません:

var span = $('<span>Test</span>');
span.data('placeholder', 'test'); // declare with .data()
$(this.el).append(span);
span.click();

jQuery の.data()メソッドは、宣言されている場合はデータ属性からプロパティを読み取りますが、データを追加するときにそれらを要素の属性として保存しません。

ここに別のJSFiddle があります。

Answer 2

試す

$("span[data-placeholder]", this.el).on("click", function () {
    alert("Bloop!");
});

Answer 3

スパンに ID を追加し、# タグを使用してそれを特定します