Построение динамических частей формы с использованием jQuery - PullRequest
1 голос
/ 13 мая 2009

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

Я работаю над формой, в которой я хотел бы дать пользователю возможность добавлять неопределенное количество контактов (имя и номер телефона). Я хочу показать только одну строку из этих полей формы для начала и позволить пользователю щелкнуть элемент, который будет добавлять дубликаты начальной строки (конечно, пустой и с обновленными идентификаторами для манипулирования этими данными, когда они возвращаются в контроллер (Приложение 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>

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

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

1 Ответ

0 голосов
/ 13 мая 2009

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

Пара идей -

  • В каком браузере вы просматриваете код, который не работает?
  • Есть ли у вас другие библиотеки JavaScript, которые вы используете, которые могут вызывать конфликты?
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...