代码之家 › 专栏 › 技术社区 › panchicore

在表单中使用jQuery克隆函数时出现问题

jquery-selectors django html jquery javascript

panchicore · 技术社区 · 16 年前

您将要检查的这些代码片段对于FF、Chrome、Safari都可以正常工作,但在运行jQuery克隆功能时,IE似乎有问题:

我的模板:

<form method="post" action="/post/add/">
{{ form.management_form }}
    <div class='table'>
      <table class='no_error'>
        <input id="id_mypost_set-0-title" type="text" name="mypost_set-0-title" />
        <input id="id_mypost_set-0-content" type="text" name="mypost_set-0-content" />
      </table>
    </div>
    <input type="button" value="Add Other" id="add_more">
    <script>
        $('#add_more').click(function() {
            cloneMore('div.table:last', 'mypost_set');
         });
    </script>
</form>

在javascript文件中:

function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
 }

问题在于选择器:“原始html代码段的克隆可以正常工作”,但是,克隆代码段的克隆会将选择器标记为“未定义”,换句话说,在我第二次克隆表时,选择器对这些克隆项不再起作用。

我错过了什么?任何提示都值得一提:)

4 回复 | 直到 16 年前

mpen 16 年前

这是一个 known jQuery bug
这里的一个选项是使用 .html() .data ,这可能是您的一个问题。 .live 如果您在这里有活动,可以提供帮助。

如果您只需要更改名称和id,那么更好的选择是使用正则表达式(这将从第一元素,请注意):

var name = $(this).attr('name').replace(/-\d+-/,'-' + total + '-');

这将搜索 -number- ,并替换它,以便在所有浏览器上查找最后一个数字,或 -0- 在IE上。

下面是一个带有警报的工作演示: http://jsbin.com/evapu

$(document).ready (单击),您有一个没有主体(无主体)的表 <tr> , <td>
虽然在这种情况下没有帮助,但是无效的DOM和不使用 ready 事件可能会导致问题。

jab11 16 年前

您缺少一个id为“id”+type+“-TOTAL\u FORMS”的隐藏输入 -您将从此对象获取总计,并使用它修改克隆对象的名称和id。

<input type="hidden" id="id_mypost_set-TOTAL_FORMS" value="1"/>

<form method="post" action="/post/add/">

它工作正常,所有新输入都有正确的ID。这在FF中真的有效吗??

partoa 16 年前

var newElement = $(selector).clone(true);

与:

var newElement = $($(selector).html());

看看是否有帮助。

另外,重新附加事件处理程序,如下所示。

newElement.bind(EVENT, function() {});

或者使用合适的助手。

-1

FrankBr 16 年前

/*
 * Clone method
 * Prevents reference problem
 */
clone: function( obj ){
  if(obj == null || typeof(obj) != 'object')
    return obj;
  var temp = new obj.constructor();
  for(var key in obj)
    temp[key] = clone(obj[key]);
  return temp;
}