JQuery的append方法，图和代码如下：如果有更好的办法能实现我的需求也欢迎大家的建议！！！

Question

点击增加时 新添加一列 div，但是我新添加的div里面包含日期插件和下拉列表里面的复选框，所以在添加的时候，并不能显示出来。先看第一张图：

点看“选择位点”里面是复选框：看第二张图：

我点击右上角的"加号的图标" 会增加新的div 看第三张图：

但是第三正图已经没有 日期的显示和下拉表了。

下面看append的方法代码：

<script type="text/javascript">
    $ (function ()
    {
       $ ('button').click (function ()
       {
           $('body').append('<div style="margin-top: 15;margin-left: 20px;"><span style="margin-top: 15;margin-left: 20px;"></span>'
           +'<input  name="time"  style="width: 150px;height: 30;"class="easyui-datetimebox" value=""/>'
           +'<span  style="margin-left: 12px">---</span>'
           +'<span style="margin-left: 12px">&nbsp;</span>'
           +' <input name="time"  style="width: 150px;height: 30;"class="easyui-datetimebox" value=""/>'
           +' <span style="margin-left: 10px">'
           +'<select id="example-getting-started" multiple="multiple">'
           +' <c:forEach items="${sessionScope.positionl}" var="positionl">'
           +' <option value="${positionl.name}">${positionl.name}</option>'
           +'</c:forEach></select></span></div>');
       });
    })
</script>

这要怎么解决，非常需要你的帮助！
还有一个问题就是：假如说我添加了三个div，我提交的时候 我怎么拿到我这三个div里面的数据，因为添加的时候都是执行同一个append方法里面的同一个div，div里面的什么名字，id都是一样的。

Answer 1

用clone() 方法
id都是一样的 就不要用ID 用 Name属性

http://www.php100.com/manual/...
http://www.w3school.com.cn/jq...
"已经没有日期的显示和下拉表" 是因为 你只append()了元素 而元素上对应的“事件”等没有添加上
可以百度一下clone()方法的用法

Answer 2

之前我也有做个一个这样的项目(事例图片无法传上来,太卡了)
也是点击一个按钮,添加一个节点,同时点击一个按钮,取消一个节点(这里也是一个动态节点的获取问题).我的解决思路是把方法绑定在父元素上(事件委托),然后遍历父节点下的子元素,再获取每个对应下标的子元素内的input内容,这样子试试看能够获取对应元素的值吗(样式名和id值都一样了,肯定不能够用获取它的方式来获取节点,只能够通过父元素,往下找对应的子元素来获取子元素内的值).当然,这算是对楼主后面一个问题的建议.关于楼主前面一个问,样式丢失,插件无法显示的问题,我也不明白楼主的demo内插件到底是如何引入的?我设想的是那个Input框的样式名easyui-datetimebox引入的插件样式.于是我就试了一下,只是我只是给这个样式名添加了一些样式,结果是可以引入样式的(页面上看出,添加前的节点样式和添加后的节点样式是一样的).所以,我也不明白楼主的问题是出现在哪里了.

Answer 3

添加之后再初始化一下插件

Answer 4

你可以先定义一个count的，每点击一次给count+1，然后给元素的id设成xxx+count,这样每个元素的id就不同了，然后设置样式或者绑定事件的时候，取id以xxx开头的，什么元素不就可以了么？

Answer 5

$("#*").clone(true)试试看这个可以不

Answer 6

大概逻辑如下：

<button>add</button>

<script type="text/javascript">
    $(function() {
        $('body').append(''
            +    '<div style="margin-top: 15;margin-left: 20px;" class="cloneUnit">'
            +    '    <span style="margin-top: 15;margin-left: 20px;"></span>'
            +    '    <input  name="time"  style="width: 150px;height: 30;"class="easyui-datetimebox" value=""/>'
            +    '    <span  style="margin-left: 12px">---</span>'
            +    '    <span style="margin-left: 12px">&nbsp;</span>'
            +    '    <input name="time"  style="width: 150px;height: 30;"class="easyui-datetimebox" value=""/>'
            +    '    <span style="margin-left: 10px">'
            +    '        <select id="example-getting-started" multiple="multiple">'
            +    '            <c:forEach items="${sessionScope.positionl}" var="positionl">'
            +    '                <option value="${positionl.name}">${positionl.name}</option>'
            +    '            </c:forEach>'
            +    '        </select>'
            +    '    </span>'
            +    '</div>')
            .children('.cloneUnit').hide();

        // 你的一些初始绑定，这里是例子
        $('.easyui-datetimebox').css('background-color', 'red').click(function() { console.log('ok')});
    })

    $('button').on('click', function() {
        // clone(true)就能把绑定都带过来
        $('body').append($('.cloneUnit').clone(true).removeClass('cloneUnit').show());
    });
</script>

Answer 7

append之后。用setTimeout(function(){},0)再实例化一次插件。'

$ (function ()
    {
       $ ('button').click (function ()
       {
           $('body').append('<div style="margin-top: 15;margin-left: 20px;"><span style="margin-top: 15;margin-left: 20px;"></span>'
           +'<input  name="time"  style="width: 150px;height: 30;"class="easyui-datetimebox" value=""/>'
           +'<span  style="margin-left: 12px">---</span>'
           +'<span style="margin-left: 12px">&nbsp;</span>'
           +' <input name="time"  style="width: 150px;height: 30;"class="easyui-datetimebox" value=""/>'
           +' <span style="margin-left: 10px">'
           +'<select id="example-getting-started" multiple="multiple">'
           +' <c:forEach items="${sessionScope.positionl}" var="positionl">'
           +' <option value="${positionl.name}">${positionl.name}</option>'
           +'</c:forEach></select></span></div>');
       });
       setTimeout(function(){你的插件的实例化代码.....}，0)
    })

Answer 8

谢邀
dateRangePicker时间范围控件这个或许更合适你

你新增以后的dom是没有时间的。你需要重新绑定一下事件就可以了。一般来说是使用id做区域控制的。你记得把id也改了