【问题标题】:JS - jQuery dynamically add and remove fieldsJS - jQuery 动态添加和删除字段
【发布时间】:2013-04-28 15:48:57
【问题描述】:

我正在尝试使用 jQuery 创建一个动态重复的字段:

HTML (PHP) 代码:

<div  id="widget_dup">
    <p>

    <textarea class="code" cols="50" rows="5" id="o99_brsa_settings[brsa_dash_wdgt_content]"  name="o99_brsa_settings[brsa_dash_wdgt_content]"  value="<?php //echo $o99_brsa_options['brsa_dash_wdgt_content']; ?>"/><?php 
                        echo $o99_brsa_options['brsa_dash_wdgt_content']; 
                        ?></textarea>
                        <label class="description" for="o99_brsa_settings[brsa_dash_wdgt_content]">
                        </br><?php _e('Content for 1st widget', 'o99-brsa-domain'); ?>
                        </label>

    </p>
</div>
<div id="addScnt">add</div><div id="remScnt">remove</div>

JS 是由我发现的一些 sn-ps 组装而成的:

<script type="text/javascript">

                //http://jsfiddle.net/obmero99/ZD9Ky/

                    // <![CDATA[

                    jQuery(function() {
                            var scntDiv = jQuery('#widget_dup');
                            var prevDiv = scntDiv.html();

                            var i = jQuery('#widget_dup p').size() + 1;

                            jQuery('#addScnt').live('click', function() {

                                    jQuery(prevDiv).appendTo(scntDiv);

                                    i++;
                                    //alert (prevDiv);
                                    return false;
                            });

                            jQuery('#remScnt').live('click', function() { 
                                    if( i > 2 ) {
                                            jQuery(this).parents('p').remove();
                                            i--;
                                    }
                                    return false;
                            });
                    });

                    // ]]>
                </script>

问题是这段代码可以复制字段,但不会更改 ID、名称和其他属性(IDNAMEFOR 等)

我尝试过:jQuery(this).attr('id')+i;jQuery(this).attr('name')+i;,但它没有按我的意愿工作。事实上,它根本不起作用。 :-)

如何修改字段的attr(),而理论上它还不存在?

根据 cmets:fiddle 在这里:http://jsfiddle.net/obmerk99/uZuWA/

【问题讨论】:

  • 不使用 .html(),使用 .clone(),你可以使用 .attr() 设置属性,就像你一直在尝试的那样

标签: javascript jquery forms duplicate-removal form-fields


【解决方案1】:

设置属性的正确使用是

$(this).attr('id', i);

您应该知道,正如 Ian 所建议的,最好使用 clone()

使用.clone进行演示

http://jsbin.com/oqalig/1/edit

【讨论】:

  • 你不是在这里设置属性而是获取
  • 你说得对,我编辑了它......错过了,逗号而不是“+”
  • 但使用 CLONE 使脚本只能运行一次。而且,它似乎并没有改变ID的..那里还有什么问题吗?
  • 好的,我知道它作为一般规则工作,但在我的脚本中它没有。所以我认为我在那里做错了什么..
  • 这似乎是另一个问题。你能在 jsbin / jsfiddle 中重新创建你的问题代码吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-04-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多