web-dev-qa-db-ja.com

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

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

メッセージを取り込み、ラジオ選択をクリックすると表示されます。新しい要素をバインドしようとすると、奇妙な方法でスタックします。要素のスタックを開始します。例-[クリック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>');
    });
};
jqueryappendbindlive
11
user1197728

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

元のソリューションはかなり近いものでしたが、イベントハンドラーを追加する方法は少しわかりにくいです。 HTML要素にイベントを追加しないことをお勧めします。 Unobstrusive 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++;    
}
14
richoffrails

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

_onclick="feedback('the message html')";
_

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

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

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

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

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

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

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

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

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

私が見るのは、ラジオボタンをクリックすると、ページ上のすべてのラジオボタンにイベントを割り当てているからです

0
Sushanth --

削除と追加の代わりにreplaceAllを使用できます replaceAll

0
Masoud