Can't Bind Events To Inputs Within Jquery.steps Wizard

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

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

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

functionrender(wizard, options, state) {
    // Create a content wrapper and copy HTML from the intial wizard structurevar 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 elementsvar 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);
}

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

Solution 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