jquery -- $(this) 不适用于新创建的元素？答案

【问题标题】：jquery -- $(this) does not apply to newly created elements?jquery -- $(this) 不适用于新创建的元素？
【发布时间】：2012-02-27 12:41:16
【问题描述】：

我确实有一个来自，比如我问你有多少推荐信。首先你从下拉菜单中选择性别，然后相关的文本框就会出现..

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

然后，您可能要添加第二个引用，您只需按添加按钮添加另一个引用..

    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

【问题讨论】：

不太确定是什么问题。 $("#select").change(function(){ 会将事件处理程序绑定到 ID 为 select 的元素，该元素当时存在。它不会影响以后添加的任何选择元素（无论如何，ID 都必须是唯一的）。
感谢 Felix，但是如何选择新添加的选择？
要么使用事件委托，如下@will 所示，要么将事件处理程序绑定到新创建的元素。
另请注意，textbox 不是<input> 的type 属性的有效值。

标签： jquery jquery-selectors

【解决方案1】：

首先，我认为您没有关闭 htcontents 字符串中的 <select>。

据我了解，您想使用 JavaScript 添加第二个引用。为了将事件处理程序绑定到这个新创建的选择，您需要使用.on() 函数，该函数会自动作用于在页面加载时执行该行之后创建的元素。

然后你可能会混淆 id "#select" 和元素 "select"。您的选择器不匹配第二个参考。您应该使用像 .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);

【讨论】：

谢谢你 Wolfram.. 你说得对，我错过了结束选择标签。创建小提琴后我将如何通知您？
您可以编辑您的问题并将链接添加到 jsfiddle。
嗨 Wolfram。非常感谢你。我自己挖掘了一下，在这里问了另一个问题，最后我有了解决方案。干杯..

【解决方案2】：

您需要使用 .delegate() (http://api.jquery.com/delegate/) 或 .on() (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 而言，那些新创建的元素不存在。使用委托或创建将应用于现有和未来元素的冒泡事件。

希望有帮助:)

【讨论】：