Скрипт не работает с новыми версиями jQuery

Этот простой скрипт для добавления/удаления строк таблицы с помощью jQuery хорошо работает с версией 1.3.2. однако на тех же страницах я также использую скрипты, которым нужен jQuery > 1.6. Этот скрипт больше не работает с этим, потому что, если я нажму «Добавить» во второй раз, он удалит строку, а не добавит ее.

Рабочий пример можно найти здесь: http://jsbin.com/arete3/edit#source

$(function(){
        $("input[type='button'].AddRow").toggle(
            function(){
                $(this).closest('tr').clone(true).prependTo($(this).closest('table'));
                $(this).attr("value", "Delete row");
            },
            function(){ 
               $(this).closest('tr').remove();          
        });
    });

Чтобы понять, что я имею в виду, измените версию jQuery на что-нибудь выше 1.6.

У кого-нибудь есть предложение?


javascript dynamic jquery html-table add
person mat    schedule 05.12.2011    source источник
comment
Что ж, поведение с более высокими версиями jQuery правильное. Что именно вы хотите, чтобы произошло?   -  person Felix Kling    schedule 05.12.2011
comment
Этот код не похож на правильную подпись для .toggle. api.jquery.com/toggle   -  person AutoSponge    schedule 05.12.2011
comment
Baszz: Особой ошибки нет, но скрипт становится бесполезным, потому что он больше не делает то, что должен был делать: jsbin.com/arete3/edit#source 1.3.2: Когда вы нажимаете кнопку добавления, добавляется строка, вы можете делать это так часто, как хотите. Вы также можете удалить добавленные вами строки, за исключением первой строки. Работает как шарм. ›1.3.2 (предпочтительнее 1.6.x): Вы можете нажать кнопку добавления строки один раз, пока это работает хорошо. Но когда вы щелкаете по нему в другой раз, он удаляет строку, а не добавляет ее. Таким же образом можно удалить первую строку.   -  person mat    schedule 05.12.2011
comment
@AutoSponge Это другой переключатель. api.jquery.com/toggle-event   -  person BNL    schedule 05.12.2011

Ответы (3)


arrow_upward
1
arrow_downward

Вот скрипт, который делает то, что вы ищете.
Я не знаю, почему вы используете .toggle, потому что один раз он добавляется, а другой удаляется. Что бессмысленно.

Проверьте этот JSBin

Я думаю, это то, что вы ищете.

$(function(){
// Add row on click (on click of the add button)
$("input[type='button'].AddRow").click(function(){
    // Add the row
    $(this).closest('tr').clone(true).prependTo($(this).closest('table'));
});

// Delete row on click (on click of the delete button)
$("input[type='button'].DelRow").click(function(){
    // Delete the row
    $(this).closest('tr').remove();
});
}); // End DOM
person Anil    schedule 05.12.2011
comment
Вы меняете разметку таким образом, вы должны попытаться ограничить изменения, когда вы делаете такой рефакторинг. - person Nicola Peluchetti; 05.12.2011
comment
Это тоже работает, спасибо. Единственное, чего мне здесь не хватает, так это того, что вы можете удалить первую строку. Но это решено сейчас. Спасибо за вашу помощь. - person mat; 05.12.2011

arrow_upward
1
arrow_downward

Ну, вы могли бы изменить сценарий следующим образом

$("input[type='button'].AddRow").click(

function() {
    var index = $(this).closest('tr').index();
    if (index > 0) {
        $(this).closest('tr').remove();
    } else {
        $(this).closest('tr').clone(true).prependTo($(this).closest('table'));
        $(this).val("Delete row");
    }

});

поиграйте здесь http://jsfiddle.net/nicolapeluchetti/fGam7/

person Nicola Peluchetti    schedule 05.12.2011
comment
Можно ли добавить какой-то счетчик в идентификатор тегов HTML? Я использую плагин jQuery datepicker (jQuery UI), который работает с одним полем, но с помощью этого скрипта каждое поле получает один и тот же идентификатор. - person mat; 05.12.2011
comment
@mat, конечно, вы можете, например, вы можете использовать индекс в качестве счетчика для добавления к вашему идентификатору. Я не видел никакого идентификатора в вашем примере, хотя - person Nicola Peluchetti; 05.12.2011
comment
это почти как запрос сценария. Я хорошо разбираюсь в PHP, но не очень хорошо разбираюсь в JS и jQuery. Я использую ваш код (как указано выше), код для средства выбора даты: jQuery('.AddRow').removeClass('hasDatepicker').datepicker({ dateFormat: 'dd-mm-yy' }); В результате все поля получают одинаковую дату. Я нашел: stackoverflow.com/questions/34790/duplicating-jquery- datepicker/ и stackoverflow.com/questions/ 2365150/, но не могу заставить его работать. Возможно, у вас есть предложение? - person mat; 06.12.2011
comment
@mat, вы должны опубликовать свой полный код, возможно, открыть новый вопрос, чтобы было легче помочь! :) - person Nicola Peluchetti; 06.12.2011
comment
> Спасибо за ваш ответ. Я открыл новую тему: stackoverflow.com/ вопросы/8399631/ - person mat; 06.12.2011

arrow_upward
1
arrow_downward

Вы не можете установить «значение» элемента таким образом. Используйте ".val()":

$(this).val("Delete row");

Начиная с jQuery 1.6, метод ".attr()" строго (ну, после 1.6.1, почти строго) работает с фактическими атрибутами, в отличие от свойства, такие как "значение" в элементе <input>. Для установки свойств вы можете использовать ".prop()" или, в частности, в случае свойства "value", ".val()".

Изменение, внесенное в 1.6.1, должно было облегчить строгость в случае нескольких логических атрибутов/свойств, таких как «checked» и «selected». По моему личному опыту, даже с ними безопаснее придерживаться «prop()», особенно при работе с переключателями.

(Разница между «атрибутом» и «свойством» кажется тонкой, но она действительно имеет значение, особенно в IE. «Атрибут» — это то, что хранится в узле DOM во внутренней карте, доступ к которой осуществляется через «setAttribute()» и «getAttribute( )". "Свойство" узла DOM похоже на любое другое свойство объекта JavaScript. Итак, поскольку для получения/установки значения узла <input> DOM вы обращаетесь к свойству "value", вы используете ".prop ()" или ".val()", чтобы манипулировать им с помощью jQuery. Другими важными свойствами являются "src", "href", "className", "id", "name", "type", "tagName" и т. д. )

Также вы можете рассмотреть возможность добавления строк таблицы к ближайшему элементу <tbody> вместо <table>.

person Pointy    schedule 05.12.2011