1

您将检查的那些代码片段适用于 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 代码段的克隆工作正常”，但是，克隆代码段的克隆将选择器标记为“未定义”，换句话说，我第二次克隆表选择器不再适用于那些克隆的项目。

问题仅适用于 IE。

我缺少什么？任何提示都表示赞赏:)

4

4 回答 4

4

这是一个已知的 jQuery 错误，尽管他们声称它已修复。
这里的一种选择是使用.html(), 并手动克隆它们。这不会克隆事件并保存.data，这对您来说可能是个问题。.live如果您在这里有活动，可以提供帮助。

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

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

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

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

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

于 2009-10-20T06:38:01.107 回答
0

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

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

和：

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

看看它是否有帮助。

另外，像这样重新附加事件处理程序。

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

或者使用适当的助手。

于 2009-10-21T21:17:44.120 回答
0

您缺少 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吗？

于 2009-10-22T14:56:19.877 回答
-1

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

/*
 * 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;
}
于 2009-10-13T16:31:36.200 回答