jquery - $（this）不适用于新创建的元素？

Question

我有一个来自，如果我问你有多少参考。首先你从下拉菜单中选择性别，然后相关的文本框来可见..

$("#select").change(function(){    
     var type = $(this).find("option:selected").val(); 
     $("input").hide().filter("." + type).show(); 
     $(":button").show(); 
     }); 

那么，你可能有一个第二参考添加后，只需按Add按钮来添加另一个参考..

var initial=0; 
      function addReference(){ 
       var newDiv= addNewDiv(); 
       var htcontents="<select id=\'new\'>" + 
        "<option value=\'\'>--choose--</option> 
        <option value=\'article\'>article</option> 
        <option value=\'thesis\'>thesis</option>" 
         + "<input class=\'article\' type=\'textbox\' name=\'ref_author_name[]\'/>" 
         + "<input class=\'article\' type=\'textbox\' name=\'ref_article_title[]\'/>" 
         + "<input class=\'thesis\' type=\'textbox\' name=\'ref_author_name[]\'/>" 
         + "<input class=\'thesis\' type=\'textbox\' name=\'ref_thesis_title[]\'/>"; 
         document.getElementById(newDiv).innerHTML=htcontents; 
      } 
      function addNewDiv(){ 
       initial=initial+1; 
       var ni = document.getElementById('area'); 
       var newdiv=document.createElement('div'); 
       var divIdName = 'Div #' +initial; 
       newdiv.setAttribute('id', divIdName); 
       ni.appendChild(newdiv); 
       return divIdName; 
      } // i guess there is a more simple solution with jQuery, but i do not know.. 

我的问题是，当你添加第二个参考并选择一个选项时，可见的文本框不会改变。我猜这发生是因为我有jquery代码，

var type = $(this).find("option:selected").val(); 
$("input").hide().filter("." + type).show(); 

我猜我没有选择我应该的任何想法？

任何帮助表示深深的感激..

这里是小提琴：http://goo.gl/Xdjtc

Answer 1

首先，我觉得你不是在你的htcontents串关闭<select>。

据我了解，你要添加使用JavaScript第二参考。为了将事件处理程序绑定到新创建的选择，你需要使用.on()功能，自动的工作就行已于页面加载执行之后创建的元素。

这时，你可能混淆了ID“＃选择”与元素“选择”。第二个参考与您的选择器不匹配。您应该使用一个类像.my-selectbox（使用比这当然是一个更好的名字），而不是一个id，因为你应该表现相同，并通过您的选择相匹配的多个元素。

如需进一步的帮助，请提供http://jsfiddle.net/或https://tinker.io/的实例。这样，有人可以更好地理解你正在尝试做什么，并在必要时修复你的代码。

希望它有帮助。根据您的jsfiddle

编辑：尝试，如果这是你在找什么：Updated version of your fiddle。您不应该使用ID两次或更多次，这意味着它是独一无二的。改用类。

如果您使用的是Firefox，检查Firebug也许the console API。它确实有助于调试你的代码。对于其他浏览器（Safari，Chrome），还有类似的Web开发者工具也提供了一个控制台。像这样调试您的对象：

console.debug(myObject); 

Answer 2

您需要使用.delegate（）（http://api.jquery.com/delegate/）或。对（）（http://api.jquery.com/on/）

如：

$("form").on('select','change',function(){    
      var type = $(this).find("option:selected").val(); 
      $("input").hide().filter("." + type).show(); 
      $(":button").show(); 
    }); 

的原因是，尽可能的JavaScript关注这些新创建的元素不存在。使用委托或创建适用于现有和未来元素的冒泡事件。

希望帮助:)