Как удалить добавленный элемент с помощью JQuery и почему bind или live вызывает повторяющиеся элементы

Теперь я знаю, что этот основной вопрос задавали раньше, но я должен делать что-то неправильно. Я знаю, что добавленный элемент должен привязываться, прежде чем я смогу что-либо сделать с ним. Однако попробуйте, чтобы я не смог заставить его работать.

Я вынимаю сообщение и показываю, когда люди щелкают по радио. Когда я пытаюсь связать новый элемент, он складывается нечетно. Он начнет складывать элементы. например, [Click 1] message 1, [Click 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>');
    });
};

Ответ 1

Если я правильно понял ваш вопрос, я сделал fiddle, который работает правильно. Эта проблема связана с тем, как вы назначаете обработчики событий, а другие говорят, что у вас есть обработчики событий. Текущей практикой jQuery является использование on() для регистрации обработчиков событий. Здесь ссылка на документы jQuery о on: ссылка

Ваше оригинальное решение было довольно близко, но способ добавления обработчиков событий немного запутан. Он считает, что наилучшая практика не добавлять события в элементы HTML. Я рекомендую читать на Unobstusive 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++;    
}

Ответ 2

Функция live регистрирует обработчик события клика. Он будет делать это каждый раз, когда вы нажимаете на объект. Поэтому, если вы дважды щелкните его, вы назначаете два обработчика кликов для объекта. Вы также назначаете обработчик кликов здесь:

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>');
                 });

Ответ 3

У вас есть несколько кнопок радио на странице.

Потому что я вижу, что вы назначаете события всем переключателям на странице при нажатии на переключатель

Ответ 4

Я бы сделал что-то вроде:

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

Ответ 5

вы можете использовать replaceAll вместо remove и добавить replaceAll