Question

你要检查的那些代码片段适用于FF，Chrome，Safari，但在运行jQuery clone功能时似乎是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片段的克隆工作正常”，但是，克隆的代码片段中的克隆将选择器标记为“未定义”，换句话说，第二次我克隆表，选择器不再适用于那些克隆的项目。

仅针对IE的问题。

我缺少什么？任何提示都是相关的：）

Answer 1

这是一个known jQuery bug，虽然他们声称这是固定的这里的一个选项是使用.html()，并手动克隆它们。这不会克隆事件并保存.data，这可能是您的问题。如果您在此处有活动，.live可以提供帮助。

如果您唯一需要的是更改名称和ID，更好的选择是使用正则表达式（这会克隆来自第一个元素的事件，请注意）：

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

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

这是一个带警报的工作演示：http://jsbin.com/evapu

作为旁注 - 你的代码有点乱。 jQuery代码应该在$(document).ready内（点击），你有一个没有正文的表（没有<tr>，<td> - 输入被抛出），代码有一些重复。
虽然在这种情况下没有帮助，但无效的DOM和不使用ready事件会导致问题。

Answer 2

如前所述，您的代码可以在所有浏览器上完美运行如果你可以替换：

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

使用：

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

看看它是否有帮助。

此外，重新附加事件处理程序，如此。

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

或使用适当的助手。

Answer 3

你错过了一个id为'id_'+ type +'-TOTAL_FORMS'的隐藏输入 - 您从此对象获取总数并使用它来修改克隆对象的名称和ID。

我用这个尝试了你的代码：

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

后立即添加

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

并且它正常工作，所有新输入都有正确的ID。这真的适用于FF ??

Answer 4

也许你可以使用这个克隆功能：

/*
 * 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;
}

在表单中使用jQuery clone功能的问题

4 个答案: