0

このhttp://jsfiddle.net/LHPbh/のようなフォームがあるレシピ保存アプリケーションを構築しています。

ご覧のとおり、フォーム要素のセットが に含まれてい<li>ます。Add Ingredient をクリックすると、フィールドに追加された Li が表示されます。

私の問題は次のとおりです。

  1. 最初の li だけが削除されます。[材料の追加] をクリックして、その材料を削除しようとしても、何も機能しませんか?
  2. 最初のliに削除を持たせない方法はありますが、後続のすべてのliには横に削除リンクがありますか? （少なくとも1つの成分が常にあるはずだからですか？）
4

4 に答える 4

4

を呼び出すとclone()、イベントが複製されません。ドキュメントclone(true)で説明されているように、これを行うには呼び出す必要があります。

于 2013-03-10T17:17:57.350 に答える
2

複製された要素にイベント リスナーを配置しませんでした。また、一意である必要があるため、「削除」リンクに独自の ID を指定しないでください。

最初の成分に削除ボタンを持たないようにするには、マークアップにボタンを含めずに、動的に作成して複製された要素に追加するだけです。

var deleteButton = $("<a class='float-left'>Delete</a>").click(deleteThis);
$('ul#listadd > li:first')
  .clone()
  .attr('name', 'ingredient' + newNum)
  .append(deleteButton)
  .appendTo('ul#listadd');

function deleteThis() {
    var li = $(this).closest('li')
    li.fadeOut('slow', function() { li.remove(); });
}

jsfiddle.net のデモ

于 2013-03-10T17:19:25.230 に答える
0

http://jsfiddle.net/LHPbh/2/

$('.deleteThis').live("click", function () {
        var li = $(this).closest('li')
        li.fadeOut('slow', function() { li.remove(); });
    });

1.ポイントへの回答です。問題は、このコードがページの読み込み時にのみ実行されるため、新しく作成された要素でイベント ハンドラー バインディングが発生しないことでした。これは、.live() を使用して解決できます。もう 1 つの問題は、id-s が一意でなければならないということでした。id の代わりに、ここでは class .deleteThis を使用できます。

http://jsfiddle.net/LHPbh/19/

これにより、2.ポイントへの回答が追加されました。

if ($("#listadd li").length == 1) {
    return;
}

リストに含まれる li 要素が 1 つだけの場合、残りのコールバックは実行されません。

于 2013-03-10T17:20:42.980 に答える
0

DOM に動的に追加されるアイテムを追加しているため、jQuery はそれらにアクセスできません :) この場合、次のコードを使用できます。

$(document).on('click', '.selector', function(e) {

    //code here

});

次に、かなり古いバージョンの jQuery をロードしていました。

3 番目に、既に存在する ID を持つ要素を選択しようとしており、ID は 1 回しか存在できません。更新された例ではクラスに変更しました。

最後に、次のようにリンクのクラスを 2 回定義していました。

<a class='float-left' id="deletethis" href='#' class="deletethis">Delete</a>

それも問題を引き起こしたので、次のような正しいマークアップに変更しました。

<a class='float-left deletethis' href='#'>Delete</a>

頑張ってください:)私はあなたのjsFiddleをここで更新しました：

http://jsfiddle.net/q4pf6/

于 2013-03-10T17:32:25.743 に答える