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