zoukankan      html  css  js  c++  java
  • 解决jquery动态增加元素后children值没有变的问题

    html代码如下:

                        <ul id="attr_input_panel">
                            <li>
                                <div class="attr_input_item">
                                    <label class="ui_form_label2">{$lang.attribute}:</label>
                                    <select class="querySelect text" name="attr_id[]">
                                    <option value="0">{$lang.select_pls}</option>
                                    <!--{html_options options=$attributes}-->
                                    </select>
                                </div>
                                <div class="attr_input_item">
                                    <label class="ui_form_label2">{$lang.value_options}:</label>
                                    <textarea class="text" name="value_options[]"></textarea>
                                </div>
                                <div class="attr_input_item">
                                    <label class="ui_form_label2">{$lang.def_value}:</label>
                                    <input class="text" type="text" name="def_value[]" size="32" value="" />
                                </div>
                                <div class="attr_input_item">
                                    <label class="ui_form_label2">{$lang.unit}:</label>
                                    <input class="text" type="text" name="unit[]" size="8" value="" />
                                </div>
                            </li>
                              <li><input class="formbtn right" id="add_goodsattr" type="button" name="add_goodsattr" value="{$lang.add_goodsattr}" /></li>
                        </ul>

    动态增加的代码如下:

        $('#add_goodsattr').click(function(){
            alert($('#attr_input_panel').children().length);
            $(this).before('<li><div class="attr_input_item">'+
                    '<label class="ui_form_label2">{$lang.attribute}:</label>'+
                        '<select class="querySelect text" name="attr_id[]">'+
                        '<option value="0">{$lang.select_pls}</option>'+
                        '{html_options options=$attributes}'+
                        '</select></div><div class="attr_input_item">'+
                        '<label class="ui_form_label2">{$lang.value_options}:</label>'+
                        '<textarea class="text" name="value_options[]"></textarea></div><div class="attr_input_item">'+
                        '<label class="ui_form_label2">{$lang.def_value}:</label>'+
                        '<input class="text" type="text" name="def_value[]" size="32" value="" /></div><div class="attr_input_item">'+
                        '<label class="ui_form_label2">{$lang.unit}:</label>'+
                        '<input class="text" type="text" name="unit[]" size="8" value="" /></div>'+
                    '</li>');
        });

    alert()出来的值始终是2, 网上查了一下改为find就好了。

    alert($('#attr_input_panel').find('li').length);
  • 相关阅读:
    react-redux
    Vue中常用的UI框架
    vue中router与route的区别
    H5新增input属性
    H5新增的input类型
    菜鸡对作用域链的理解
    自己对路由的一些理解
    浏览器缓存
    黄瓜的不定期更新面试题
    ajax封装
  • 原文地址:https://www.cnblogs.com/jenqz/p/3526649.html
Copyright © 2011-2022 走看看