построения динамических форм частей с использованием JQuery

Question

(Надеюсь, что это не получает дублируется, вторая попытка подачи на этот вопрос)

Я работаю в форме, в которой я хотел бы дать пользователю возможность добавлять неопределенное количество контактов (имя и номер телефона). Я хочу показать только одну строку этих полей формы и позволить пользователю щелкнуть элемент, который добавит дубликаты исходной строки (пустой и, конечно, с обновленными идентификаторами для управления этими данными, когда он вернется к контроллеру (Приложение ASP.NET MVC).

Я нашел несколько примеров, которые работают с использованием версии 1.2.x библиотеки jQuery, но я не могу заставить кого-либо из них работать с 1.3.2. имеет отношение к методу $ .clone(). Когда я вызываю этот метод на селекторе/элементе, страница выполняет полное обновление, и пользователю предоставляется чистая форма.

Текущий пример, который я использовал (с http://devblog.jasonhuck.com/assets/infiniteformrows.html) выглядит так:

Стол -

<table id="tabdata"> 
      <thead> 
       <tr> 
        <th>Row</th> 
        <th>Cell 1</th> 
        <th>Cell 2</th> 
        <th>Cell 3</th> 

        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td><a id="addnew" href="">Add</a></td> 
        <td><input id="n0_1" name="n0_1" type="text" /></td> 
        <td><input id="n0_2" name="n0_2" type="text" /></td> 

        <td><input id="n0_3" name="n0_3" type="text" /></td> 
        <td></td> 
       </tr> 
      </tbody> 
     </table> 

Сценарий -

<script type="text/javascript"> 
    $(function() { 
     var newRowNum = 0; 

     $('#addnew').click(function() { 
      newRowNum++; 
      var addRow = $(this).parent().parent(); 
      var newRow = addRow.clone(); 
      $('input', addRow).val(''); 
      $('td:first-child', newRow).html(newRowNum); 
      $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>'); 
      $('input', newRow).each(function(i) { 
       var newID = newRowNum + '_' + i; 
       $(this).attr('id', newID).attr('name', newID); 
      }); 
      addRow.before(newRow); 

      $('a.remove', newRow).click(function() { 
       $(this).parent().parent().remove(); 
       return false; 
      }); 

      return false; 
     }); 
    }); 
</script> 

Когда метод гласит "переменная NewRow = addRow.clone();", страница перезагружается. Не знаю, почему, но запустив скрипт против более ранней версии jQuery, он работает отлично. Я бы предпочел не возвращаться в версии, если я могу помочь.

Любые мысли? Есть ли лучший способ сделать это? Это должно быть довольно просто, но оказалось более утомительным, чем я хочу, чтобы это была библиотека, которую я выбрал.

Answer 1

Here is an example вашего кода. Он отлично работает для меня в Firefox 3, а также в IE 7. В коде используется jQuery 1.3.2. Если вы хотите отредактировать код, просто добавьте /edit в URL.

Пара идей -

• Какой браузер вы просматриваете код, который не работает?
• Есть ли у вас какие-либо другие библиотеки JavaScript, которые вы используете, которые могут вызывать конфликты?