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

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

3 голосов
/ 05 декабря 2011

Этот простой скрипт для добавления / удаления таблиц с помощью 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

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

Ответы [ 3 ]

1 голос
/ 05 декабря 2011

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

$("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/

1 голос
/ 05 декабря 2011

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

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

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

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

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

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

1 голос
/ 05 декабря 2011

Вот скрипт, который делает то, что вы ищете.
Я не знаю, почему вы используете .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
...