0

わかりましたので、私はこの問題で立ち往生しており、なぜうまくいかないのかわかりません。私のプログラムが一般的にやろうとしていることのjsfiddleを作成しました：

http://jsfiddle.net/ZNbm8/

私のjQueryは：

var count = 0;
$("#add").on("click", function(){
    var html = '<div id="stuff">';
    count++;
    html += '<button class="remove" id="' + count + '">Remove</button>';
    html += '</div>';
    $( html ).insertBefore("#add");
});
$(".remove").on("click", function(){
    $(this).remove();
});

私のhtmlは次のとおりです。

<button id="add">Add</button>

基本的に、HTMLを作成するボタンがあります。この新しい html は、それに関連付けられたボタンを作成し、ユーザーがその新しく作成されたエントリを削除できるようにします。なぜこれが機能しないのかわかりません。解決策を探しましたが、これまでのところ何も機能していません。

4

6 に答える 6

4

まだ存在しない要素にクリック ハンドラーをアタッチしているため、機能していません。

デリゲートを使用してクリック ハンドラーを少し変更すれば、問題ありません。

HTML:

<div class="parentElement">
  <button id="add">Add</button>
</div>

JS:

$(".parentElement").on("click", ".remove", function(){
    $(this).remove();
});
于 2013-02-27T22:38:46.030 に答える
2

前にコンテンツを挿入しているので#add、その親を取得し、委任されたイベントハンドラーを追加して、次のように要素on()を削除します。#stuff

var count = 0;
$("#add").on("click", function(){
    count++;
    var html = '<div id="stuff_' + count + '">';
        html += '<button class="remove" id="a' + count + '">Remove</button>';
        html += '</div>';
    $( html ).insertBefore("#add");
}).parent().on('click', '.remove', function(){
    $(this).closest('[id^="stuff_"]').remove();
});

編集：IDの問題を修正しました！

于 2013-02-27T22:40:34.110 に答える
1

onこれを機能させるには、の委任バージョンを使用する必要があります

フィドル：

$(document).on("click", ".remove",function(){
    $(this).remove();
});

http://jsfiddle.net/DpDYq/

于 2013-02-27T22:40:58.147 に答える
0

その使用のために

$('.remove').live('click', function(event)
于 2013-02-27T22:40:47.787 に答える
0

jQueryのドキュメントによると：

jQuery 1.7以降、.live（）メソッドは非推奨になりました。.on（）を使用して、イベントハンドラーをアタッチします。

したがって、次を使用してこのようにすることもできます.on()：

$("body").on("click", ".remove", function(){
    $(this).remove();
});

あなたがここで見ることができるように：http：//jsfiddle.net/darkajax/JWFgS/

注：body親要素を変更できます...

于 2013-02-27T22:40:54.847 に答える
0

動的要素を追加するときに、javacsript でこれらの要素に影響を与えたい場合は、次を使用する必要があります.live

var count = 0;
$("#add").live("click", function(){
    var html = '<div id="stuff">';
    count++;
    html += '<button class="remove" id="' + count + '">Remove</button>';
    html += '</div>';
    $( html ).insertBefore("#add");
});
$(".remove").live("click", function(){
    $(this).remove();
});

http://jsfiddle.net/ZNbm8/3/

編集

コメントで言及されているASはlive()、jquery（1.7以降）の以降のバージョンでは非推奨です。代わりにこれを行います：

var count = 0;
$('body').on('click', '#add', function(){
    var html = '<div id="stuff">';
    count++;
    html += '<button class="remove" id="' + count + '">Remove</button>';
    html += '</div>';
    $( html ).insertBefore("#add");
});
$('body').on('click', '.remove', function(){
    $(this).remove();
});

上記は、今後追加される場合でも、「body」内の DOM 要素の子孫であるクラス「remove」または ID「add」を持つすべての DOM 要素にハンドラーをアタッチします。

于 2013-02-27T22:39:55.960 に答える