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/

Answer 1

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

Answer 2

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

Answer 3

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

Use a keyup event instead.

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

Answer 4

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