1

我正在使用来自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/

4

4 回答 4

6

看起来当向导被加载时，它改变了事件监听器。#wizard相反，您将需要监听事件。

尝试这个：

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

注意：如果您希望在用户键入时发生更改，而不是在字段失去焦点之后，您可以使用keyup事件来代替。

$("#wizard").on('keyup','.namer',function(){
    $(".text").html($(this).val());     
});
于 2013-11-18T16:36:23.827 回答
4

只是为了澄清为什么会发生这种情况 - 在render函数中（第 892 行），向导的内容被删除.empty()，因此任何绑定到其中元素的侦听器都会丢失。

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

所以有三个选项可以解决这个问题，第一个是按照Trevor所说的将你的侦听器绑定到 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);
}
于 2014-06-13T09:06:03.963 回答
0

在焦点离开输入之前，该事件不会触发。

改为使用keyup事件。

见：http: //jsfiddle.net/MV2dn/5/

于 2013-11-18T16:43:25.737 回答
0

要解决此问题，请在页面准备就绪时在您的其他代码之前调用步骤代码，以便在 Steps 工作时您的绑定不会丢失

于 2016-12-23T16:08:34.633 回答