0

私はすべて設定したと思いますが、まだ機能していません-新しいhtml要素inputにX削除記号を追加しています。X新しく追加された記号をクリックすると、新しく追加された入力が削除されます。私がしたことは：

function addmore(){
   $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').insertAfter('#more').find('.del').on('click', function(){
   alert('test');
   });
 }

私のhtmlは：

 <a href="javascript:addmore()"> add more </a>
 <p id="more"></p>

うまく挿入されていますが、新しく追加された要素を削除できません（アラートが発火していません）。どうしてこれなの？

どうもありがとう

4

3 に答える 3

2

この.find()関数は、一致する要素の現在のセット内にある要素を探しますが、それらの一致する要素は含まれません。あなたの<a class="del">要素は一致した要素のセットの一部であるため、選択されません。

.filter()代わりに使用してください:

....filter('.del').on('click', function() {...});
于 2013-03-11T10:16:52.680 に答える
1

これを試して

    function addmore(){
        var element = $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').insertAfter('#more');
        element.filter(".del").on('click', function(){
        alert('test');
       });
     }
于 2013-03-11T10:15:56.347 に答える
1

セレクターは実際には何も返しませ.find()ん。jQuery が HTML 文字列を処理する方法を見ると、次のようになります。

> $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>')
[<input type=​"file" name=​"bild[]​">​, #text, <a class=​"del">​X​&lt;/a>​, #text, <br>​]

実際には、これらの要素とテキスト ノードのそれぞれが、セレクター内の個別の要素として解析されていることがわかります。.find()要素自体ではなく、これらの要素の子孫のみを調べるため、何も返しません。

> $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').find('.del')
[]

私は次のようなものから始めます：

$('<input type="file" name="bild[]"/>').insertAfter('#more');
$('<a class="del">X</a>').insertAfter('#more').on('click', function(){
    alert('test');
});

$('<br/>').insertAfter('#more');

または、まだ存在しない要素に対しても、クリック イベントを自動的に処理するジェネリック セレクターを最初から作成します。

$('#more').on('click', '.del', function() {
    alert('test');
});
于 2013-03-11T10:18:52.573 に答える