Question

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

$("#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

Answer 1

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

e.g：

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

原因是，就javascript而言，那些新创建的元素不存在。使用委托或创建将应用于现有和未来元素的冒泡事件。

希望有所帮助：）

Answer 2

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

据我了解，您希望使用JavaScript添加第二个引用。为了将事件处理程序绑定到这个新创建的select，您需要使用.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);

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

2 个答案: