1

ここに私の問題を説明するjsFiddleがあります。「材料を追加」ボタンをクリックしようとすると、ボタンクリックイベントが呼び出されます。私の問題は、「サブタイトルの作成」をクリックすると、サブカテゴリごとに「成分の追加」ボタンが動的に作成されることです。すべてのボタンには、「create-ingredient」で始まる同じ ID が一意の ID と連結されているため、ボタンの一意の ID が作成されます。次に、jQuery の「start with」セレクターを使用して、「create-ingredient」で始まるすべてのボタンを選択します。動的に作成されたものを選択するのではなく、元々 html ページにあったもので動作します。

動的なもので発生しないクリックイベントは次のとおりです。

$("[name^='create-ingredient']").click(function() {
    alert('ingredient clicked');
    return false;
});​

動的に作成されたボタン イベントが呼び出されるようにするには、何を変更する必要がありますか?

ありがとう！

4

2 に答える 2

6

clickイベントを静的に接続します。on追加された要素でもイベントをトリガーする必要があります。

の構文はonとは少し異なることに注意してくださいclick。通常は次を使用します。

$("container").on("click", "selector", handler);

ここで、「container」は静的コンテナー要素 (単に「document」でもかまいません) を選択し、「selector」はターゲットにする要素です。

フォークフィドル。

編集

David のコメントに従って上記を明確にします。on実際に を使用すると、イベント ハンドラが「コンテナ」にアタッチされ、「セレクタ」に一致するコンテナ内の任意の要素にコールバックが委任されます。これは、 JQuery ドキュメントを読む価値があるケースです。

セレクターが提供されている場合、イベント ハンドラーは委任されていると見なされます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。jQuery は、イベント ターゲットからハンドラーがアタッチされている要素 (つまり、最も内側の要素から最も外側の要素) までイベントをバブルし、セレクターに一致するそのパスに沿ったすべての要素に対してハンドラーを実行します。

于 2012-12-12T01:39:56.063 に答える
2

試してください: jQuery (>1.7)

$(document).on('click', '[name^="create-ingredient"]', function() {
    alert('ingredient clicked');
    return false;
});

または古い jquery (<1.7) の場合

$("[name^='create-ingredient']").live(function() {
    alert('ingredient clicked');
    return false;
});
于 2012-12-12T01:40:51.570 に答える