Не удается привязать события к входам в мастере jquery.steps

Я использую мастер с сайта http://www.jquery-steps.com/. Все с мастером работает довольно гладко, но когда я пытаюсь связать событие с полями ввода в этом мастере, он не работает. Ниже приведен основной код для проблемы:

<div class="content">
            <h1>Basic Demo</h1>


            <div id="wizard">
                <h2>First Step</h2>
                <section>
                    <input type="text" class="namer" />

                    <div class="text">This should be replaced</div>

                <h2>Second Step</h2>
                <section>
                    <pdfsgdf</p>
                </section>

            </div>
        </div>

<script>
$(".namer").change(function(e){
  $(".text").html($(this).val()); 
});

$(function ()
                {
                    $("#wizard").steps({
                        headerTag: "h2",
                        bodyTag: "section",
                        transitionEffect: "slideLeft"
                    });
                });

</script>

А JSFiddle находится по адресу http://jsfiddle.net/m23px/.


javascript jquery jquery-steps
person Suthan Bala    schedule 18.11.2013    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Похоже, когда мастер загружается, он меняет прослушиватель событий. Вместо этого вам нужно будет прослушать событие на #wizard.

Попробуй это:

$("#wizard").on('change','.namer',function(){
    $(".text").html($(this).val());     
});

Примечание. Если вы хотите, чтобы изменение происходило во время ввода пользователем, а не после того, как поле теряет фокус, вы можете вместо этого использовать событие keyup.

$("#wizard").on('keyup','.namer',function(){
    $(".text").html($(this).val());     
});
person Trevor    schedule 18.11.2013
comment
простое решение и хорошо работает, спасибо с 2018 года :) - person Mada Aryakusumah; 15.07.2018

arrow_upward
4
arrow_downward

Просто чтобы прояснить, почему это происходит - в функции render (строка 892) содержимое мастера удаляется с помощью .empty(), и, таким образом, все прослушиватели, привязанные к элементам внутри него, теряются.

wizard.attr("role", "application").empty().append(stepsWrapper).append(contentWrapper)
    .addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);

Таким образом, есть три варианта решения этой проблемы: первый — сделать так, как сказал Тревор, и привязать слушателей к любому элементу мастера или какой-то элемент над ним в DOM.

Во-вторых, добавить обратный вызов, когда плагин закончит загрузку, и инициализировать ваши слушатели как обычно в этот момент.

Третий — изменить функцию render для использования исходного html (и, следовательно, исходных слушателей), например так:

function render(wizard, options, state) {
    // Create a content wrapper and copy HTML from the intial wizard structure
    var contentWrapperTemplate = "<{0} class=\"{1}\"></{0}>",
        stepsWrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
        orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
        verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
        contentWrapper = $(contentWrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass)),
        stepsWrapper = $(stepsWrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>"));

    // Transform the wizard wrapper by wrapping the innerHTML in the content wrapper, then prepending the stepsWrapper
    wizard.attr("role", "application").wrapInner(contentWrapper).prepend(stepsWrapper)
        .addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);

    //Now that wizard is tansformed, select the the title and contents elements
    var populatedContent = wizard.find('.content'),
        stepTitles = populatedContent.children(options.headerTag),
        stepContents = populatedContent.children(options.bodyTag);

    // Add WIA-ARIA support
    stepContents.each(function (index) {
        renderBody(wizard, state, $(this), index);
    });

    stepTitles.each(function (index) {
        renderTitle(wizard, options, state, $(this), index);
    });

    refreshStepNavigation(wizard, options, state);
    renderPagination(wizard, options, state);
}
person Kaish    schedule 13.06.2014
comment
спасибо за ваш вклад :) могу я узнать, как добавить обратный вызов? с некоторым примером кода - person Sasi varna kumar; 25.06.2015
comment
Этот ответ закончил для меня целую неделю мучений и споров. Огромное спасибо! - person tmesser; 29.06.2015

arrow_upward
0
arrow_downward

Событие не сработает, пока фокус не переместится с ввода.

Вместо этого используйте событие keyup.

См.: http://jsfiddle.net/MV2dn/5/.

person Hunter    schedule 18.11.2013
comment
Да, но это все равно не изменится в случае с включенным мастером. В вашем примере он отлично работает, потому что у вас нет мастера. Спасибо хоть. - person Suthan Bala; 18.11.2013

arrow_upward
0
arrow_downward

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

person code511788465541441    schedule 23.12.2016