无法将事件绑定到jquery.steps向导中的输入

我正在使用http://www.jquery-steps.com/上的向导。 使用向导的所有内容都非常流畅，但是当我尝试将事件绑定到该向导中的输入字段时，它无法正常工作。 以下是该问题的基本代码：

 
Basic Demo
 
 
First Step
 
  
This should be replaced
 
Second Step
 
 <pdfsgdf
 
 
 
  $(".namer").change(function(e){ $(".text").html($(this).val()); }); $(function () { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft" }); });  

JSFiddle位于http://jsfiddle.net/m23px/

Answer 1

看起来当加载向导时，它会更改事件监听器。 你需要在#wizard上听取这个事件。

试试这个：

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

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

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

Answer 2

只是为了澄清为什么会发生这种情况 – 在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}\">", stepsWrapperTemplate = "<{0} class=\"{1}\">{2}", 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, "
")); // 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

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

请改用keyup事件。

请参阅： http ： //jsfiddle.net/MV2dn/5/

Answer 4

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