JQuery - переключение между значениями html с использованием метода on

0

Точка этого кода состоит в том, чтобы переключаться между двумя версиями innerHTML внутри div, используя входные значения (или значения по умолчанию), а также переключать отображение кнопки. Это не работает. После первого нажатия "новая" кнопка выходит из строя. Предполагается, что div вернется к исходному экрану с пустыми полями ввода.

Я рассмотрел еще несколько вопросов по методу.toggle, но он устарел, и неясно, какое лучшее исправление. По-видимому, не существует большого согласия в отношении подхода. Вот другие темы, которые я нашел для справки:

Вот пример jsfiddle того, что я пытаюсь сделать.

Код HTML:

<div id="case-name">Case Name:&nbsp;In the Matter of <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50"></input> and <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50">&nbsp;<button id="case-name-submit" type="button" value="none">Submit</button></div>

Автор сценария:

$(document).ready(function(){
//EVENT TRIGGERS AND ACTIONS
$('#case-name-submit').on('click', function(){
    $('#case-name').fadeOut('fast').html(
    'Case Name:&nbsp;In the Matter of ' + $('#input-petitioner').val() + ' and ' +  $('#input-respondent').val() + '&nbsp;<button id="case-name-change" type="button" value="none">Change</button>'
    ).fadeIn('fast');
});
$('#case-name-change').on('click', function(){
    $('#case-name').fadeOut('fast').html(
    'Case Name:&nbsp;In the Matter of <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50"></input> and <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50">&nbsp;<button id="case-name-submit" type="button" value="none">Submit</button>'
    ).fadeIn('fast');
});
});
  • 1
    вам нужно посмотреть на [делегирование событий] (learn.jquery.com/events/event-delegation/)
  • 0
    Очень крутая ссылка. Я обязательно проверю это.
Теги:

2 ответа

2
Лучший ответ

Поскольку ваши #case-name-submit и #case-name-change были добавлены динамически в DOM, все события недоступны для этих двух элементов, поэтому вам нужно использовать делегирование событий здесь, чтобы прикрепить событие click к этим кнопкам:

Делегирование событий позволяет нам присоединить одного прослушивателя событий к родительскому элементу, который будет срабатывать для всех дочерних элементов, соответствующих селектору, независимо от того, существуют ли эти дети сейчас или добавлены в будущем.

$(document).ready(function(){
//EVENT TRIGGERS AND ACTIONS
$('#case-name').on('click', '#case-name-submit', function(){
        $('#case-name').fadeOut('fast').html(
        'Case Name:&nbsp;In the Matter of ' + $('#input-petitioner').val() + ' and ' + $('#input-respondent').val() + '&nbsp;<button id="case-name-change" type="button" value="none">Change</button>'
        ).fadeIn('fast');
    });
$('#case-name').on('click','#case-name-change', function(){
        $('#case-name').fadeOut('fast').html(
        'Case Name:&nbsp;In the Matter of <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50"></input> and <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50">&nbsp;<button id="case-name-submit" type="button" value="none">Submit</button>'
        ).fadeIn('fast');
    });
});
Поделиться
  • 0
    Это именно то, что я пытался сделать. И спасибо за объяснение. Если я правильно понимаю, одна из вещей, которые я делал неправильно, не включала родительские и дочерние элементы. Поскольку делегирование событий применяется к потомкам, даже если они «существуют сейчас или будут добавлены в будущем», отсутствие дочерних элементов фактически сводит на нет обработку событий. Например, $ ('# myID'). On ('click', function () ... не имеет дочерних элементов, только родительский #myID. Это правильно?
  • 1
    Нет, не имеет значения, включаете ли вы родительские и дочерние элементы или нет. Здесь важно, что ваш элемент не существует в DOM при загрузке страницы (фактически он работает в первый раз, когда вы нажимаете кнопку «Отправить», поскольку кнопка «Отправить» уже добавлена в DOM). Но со второго раза вы меняете HTML-код, чтобы новый добавленный HTML-элемент не мог получать никаких событий, таких как click, hover, ...., поэтому делегирование событий поможет вам решить эту проблему.
2

У вас есть динамические элементы, так как вы меняете содержимое, поэтому используйте делегирование событий

$(document).ready(function () {
    //EVENT TRIGGERS AND ACTIONS
    $('#case-name').on('click', '#case-name-submit', function () {
        $('#case-name').fadeOut('fast', function () {
            $(this).html(
                'Case Name:&nbsp;In the Matter of ' + $('#input-petitioner').val() + ' and ' + $('#input-respondent').val() + '&nbsp;<button id="case-name-change" type="button" value="none">Change</button>').fadeIn('fast')
        });
    }).on('click', '#case-name-change', function () {
        $('#case-name').fadeOut('fast', function () {
            $(this).html(
                'Case Name:&nbsp;In the Matter of <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50"></input> and <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50">&nbsp;<button id="case-name-submit" type="button" value="none">Submit</button>').fadeIn('fast')
        });
    });
});

Также вам нужно обновить html внутри полного обработчика fadeOut

Демо: скрипка

Обновленная версия

Поделиться
  • 0
    Это решение действительно очень умное. Я бы не подумал связать оба «включенных» события с одним и тем же селектором. Выше, между этим решением и решением Феликса, это в основном просто стилистическая разница (например, он использует два селектора, а это один). Есть ли что-то еще существенно отличное в решениях? Благодарю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню