在表单中使用jQuery clone函数的问题 [英] Problem using jQuery clone function in form

问题描述

我的这个代码可以用于FF，Chrome，Safari，但是似乎是IE运行jQuery克隆功能时的问题。模板：

 < form method =postaction =/ post / add /> 
 {{form.management_form}} 
< div class ='table'> 
< table class ='no_error'> 
< input id =id_mypost_set-0-titletype =textname =mypost_set-0-title/> 
< input id =id_mypost_set-0-contenttype =textname =mypost_set-0-content/> 
< / table> 
< / div> 
< input type =buttonvalue =Add Otherid =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（）;每个（function（）{
 var name = $（this）.attr（'name'）。replace（' - '+（total-1））
 newElement.find（'：input' +' - '，' - '+ 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。

什么im丢失？任何提示被解释：）

解决方案

这是一个已知的jQuery错误，虽然他们声称它是固定的。

这里的一个选项是使用 .html（），并手动克隆。这不会克隆事件并保存 .data ，这可能是您的问题。 .live 可以帮助你在这里有事件。

如果您唯一需要的是更改名称和ID，则更好的选择是使用正则表达式（这将克隆来自的事件元素，记住你）：

  var name = $（this）.attr（'name'）。replace / -\d +  -  /，' - '+ total +' - '）; 
  

这将搜索 -number - 并替换它，因此它可以在所有浏览器上找到最后一个号码，或者在IE上找到 -0 - 。

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

作为附注 - 你的代码有点混乱。 jQuery代码应该在 $（document）.ready （点击）之内，你有一个没有正文的表（no < tr> ，< td> - 输入被抛出），代码有一些重复。

虽然没有在这种情况下帮助，无效的DOM和不使用就绪事件可能会导致问题。

Those snippes of code that you will check works fine for FF, Chrome, Safari, but seems to be a problem with IE when running jQuery clone function:

My template:

<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>

In a javascript file:

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);
 }

The problem is with the selector: "A clone of the original html piece of code works OK", but, A clone from cloned piece of code marks the selector as "undefined", in other words, the second time that I clone the table the selector doesnt work anymore for those cloned items.

Problem only for IE.

What im missing? Any hint is apreciated :)

解决方案

This is a known jQuery bug, though they claim it is fixed.
One option here is to use .html(), and clone them manually. This will not clone events and saved .data, which may be an issue for you. .live can help if you have events here.

If the only thing you need is to change the names and id, a better option is to use a regular expression (this clones the events from the first element, mind you):

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

this will search for -number-, and replace it, so it finds the last number on all browsers, or -0- on IE.

Here's a working demo with alerts: http://jsbin.com/evapu

As a side note - your code is a little messy. jQuery code should be inside $(document).ready (the click), you have a table with no body (no <tr>,<td> - the inputs are thrown out), and the code has some duplications.
Although it didn't help in this case, invalid DOM and not using the ready event can cause problems.

这篇关于在表单中使用jQuery clone函数的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！