Can't bind events to inputs within jquery.steps wizard

Question

I am using the Wizard from http://www.jquery-steps.com/. Everything with the wizard works pretty smooth, but when I try to bind an event to the input fields within that wizard, it is not working. The following is the essential code for the issue:

<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>

And the JSFiddle is at http://jsfiddle.net/m23px/

Trevor · Accepted Answer · 2013-11-18T16:44:42.233

6

It looks like when the wizard is loaded, its changing the event listener. You will need to listen for the event on the #wizard instead.

Try this:

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

Note: If you want the change to happen as the user is typing, instead of after the field loses focus you can use the keyup event instead.

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

edited Nov 18 '13 at 16:44

answered Nov 18 '13 at 16:36

Trevor

16,080
9
52
83

1

simple solution and working well,,, thank you from 2018 :) – Mada Aryakusumah Jul 15 '18 at 14:50

score 4 · Answer 2 · edited May 23 '17 at 12:24

Just to clarify why this is happening - in the render function (line 892), the content of the wizard is removed using .empty() and thus any listeners bound to elements inside it are lost.

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

So there are three options to solve this, the first is to do as Trevor said and bind your listeners to either the wizard element or some element above it in the DOM.

The second is to add a callback for when the plugin has finished loading and initialise your listeners as normal at that point.

The third is to change the render function to use the original html (and therefore the original listeners), like so:

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

thank you for your inputs :) may i know, how to add a callback ? with some sample code — Sasi varna kumar, Jun 25 '15 at 07:44
This answer ended an entire week of agonizing and wrangling for me. Thank you very, very much! — tmesser, Jun 29 '15 at 17:59

score 0 · Answer 3 · answered Nov 18 '13 at 16:43

0

The event won't fire until the focus is off of the input.

Use a keyup event instead.

See: http://jsfiddle.net/MV2dn/5/

answered Nov 18 '13 at 16:43

Hunter

146
4

Yes, but it still won't change in the case with the wizard enabled. It works fine in your example though because you don't have the wizard. Thanks though. – Suthan Bala Nov 18 '13 at 16:47

score 0 · Answer 4 · answered Dec 23 '16 at 16:08

0

To solve this problem call steps code before your other code when the page is ready so that your bindings are not lost when Steps does its work

answered Dec 23 '16 at 16:08

124697

22,097
68
188
315

Can't bind events to inputs within jquery.steps wizard

4 Answers4

Linked