jquery - Jqueryで追加された要素を削除する方法と、バインドまたはライブによって要素が繰り返される理由

Question

今、私はこの基本的な質問が以前に尋ねられたことを知っていますが、私は何か間違ったことをしているに違いありません。追加された要素は、何かを実行する前にバインドする必要があることを知っています。しかし、私はそれを動作させることができないかもしれないので試してみてください。

私はメッセージを引き出し、人々がラジオの選択をクリックしたときに表示しています。新しい要素をバインドしようとすると、奇妙な方法でスタックします。要素のスタックを開始します。例-[クリック1]メッセージ1、[クリック2]メッセージ1と2など。

私はそれをバインドするためにたくさんの異なる方法を試しました。私の望みは、削除によって#feedbackが削除され、次のメッセージが作成されてバインドされることでした。私はひどく間違ったことをしているに違いありません。私はこれが他の投稿と非常に似ていることを知っていますが、私はそれらすべてを調べて、助けるのに十分な明確な答えを見つけることができませんでした。前もって感謝します。

HTML

<div class="answers">
    <ul>
        <li>
            <input id="answer" type="radio" onclick="feedback('THE MESSAGE HTML')"><label>Label</label>
        </li>
    </ul>
</div>

JavaScript：

function feedback(message)
{
    $('#answer').live('click', function()
    {
        $('#feedback').remove();
    });

    $('#answer').live('click', function()
    {
        $('.answers').append('<div id="feedback">'+message+'</div>');
    });
};

Answer 1

私があなたの質問を正しく理解しているなら、私はこれが正しく機能するフィドルを作りました。この問題は、イベントハンドラーの割り当て方法にあり、他の人が言っているように、イベントハンドラーに乗り越えています。現在のjQueryのベストプラクティスは、on()イベントハンドラーの登録に使用することです。これは、jQueryドキュメントへのリンクですon：link

元のソリューションはかなり近いものでしたが、イベントハンドラーを追加する方法は少し混乱しています。HTML要素にイベントを追加しないことがベストプラクティスと見なされます。控えめなJavaScriptを読むことをお勧めします。

これがJavaScriptコードです。正しく機能していることを確認できるように、カウンター変数を追加しました。

$('#answer').on('click', function() {
  feedback('hey there');
});

var counter = 0;

function feedback(message) {

  $('#feedback').remove();

  $('.answers').append('<div id="feedback">' + message + ' ' + counter + '</div>');

  counter++;    
}

Answer 2

このlive関数は、クリックイベントハンドラーを登録しています。オブジェクトをクリックするたびにそうします。したがって、2回クリックすると、オブジェクトに2つのクリックハンドラーが割り当てられます。ここでは、クリックハンドラーも割り当てています。

onclick="feedback('the message html')";

そして、そのクリックハンドラーは、を介して別のクリックハンドラーを割り当てていますlive()。

本当にあなたがやりたいと思うのはこれです：

function feedback(message)
{
    $('#feedback').remove();

    $('.answers').append('<div id="feedback">'+message+'</div>');
}

---

onclickわかりました、あなたのコメントに従って、要素の一部を取り出して、<a>代わりにこれをdocument.ready()ハンドラーに入れてみてください。

$('#answer').live('click',function(){
                     $('#feedback').remove();
                     $('.answers').append('<div id="feedback">'+message+'</div>');
                 });

Answer 3

ページに複数のラジオボタンがありますか。

ラジオボタンをクリックすると、ページ上のすべてのラジオボタンにイベントが割り当てられていることがわかります。

Answer 4

私は次のようなことをします：

$(documento).on('click', '#answer', function() {
  feedback('hey there');
});

Answer 5

replaceAllを削除して追加する代わりにreplaceAllを使用できます