Когда вы используете подключение обработчика DOM0 старого стиля (onclick="..."), все функции, на которые вы ссылаетесь в этой строке, должны быть глобальными.Ваша delRow функция не является глобальной, она содержится в функции, которую вы передаете в ready - что хорошо, глобальное пространство имен уже переполнено.
Два варианта работы сэто:
1.Подключите вещи с помощью jQuery
Лучший способ (на мой взгляд) справиться с этим - подключить ваш button с помощью jQuery из вашей функции ready.Например:
$("#delete_participants").click(delRow);
2.Экспортируйте только эту функцию
В качестве альтернативы, вы могли бы создать глобал, который указывает на delRow, выполнив это в функции ready:
window.delRow = delRow;
Это работаетпоскольку все глобальные переменные являются свойствами объекта window в браузерах, поэтому, присваивая ссылку на delRow свойству delRow в window, вы явно делаете его доступным в глобальном пространстве имен (без загроможденияглобальное пространство имен с любой из ваших других функций).Тогда обработчик onclick="..." сможет увидеть его.Но я бы не рекомендовал использовать глобальные переменные, если вы можете избежать этого.Тем не менее, это полезный метод соединения, когда вы переходите от старого стиля к новому.
Примечание: у вас нет для использования функции ready, вы можете просто поместить свой скрипт внизу страницы (непосредственно перед или после конечного тега </body>) и сделать это:
(function() {
// Your code here
})();
Он будет запускаться немного раньше,и по-прежнему иметь доступ ко всем элементам DOM на странице ( ref | ref ).Но ready в основном тоже нормально.
Ваш комментарий ниже:
Я дал динамическим кнопкам идентификатор "delete_participants" и создал $("#delete_participants").click(delRow);, ноэто не называют.Это работает для статической кнопки tho.
Это потому, что вы не можете иметь более одного элемента на странице с одинаковым id.id значения должны быть уникальными.
Если вы собираетесь добавлять и удалять строки и если вы используете jQuery для подключения, у вас есть два дополнительных выбора:
A.Подключите их по отдельности
Это всего лишь вопрос вызова click(function() { ... }) для новой кнопки после ее создания, например:
var tr = '<tr><td><input type="button" name="delete"></td></tr>';
tr.find('input').click(delRow);
tr.appendTo(/* ...presumably a table body or something...*/);
Так, например, вот полный пример:
HTML:
<table id="participants">
<tfoot>
<tr>
<td colspan='2'>
<input type="button" name="add" value="Add Participant">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Joe Bloggs
</td>
<td>
<input type="button" name="delete" value="Delete">
</td>
</tr>
</tbody>
</table>
JavaScript:
jQuery(function($) {
$("#participants")
.delegate('input[name="add"]', "click", addParticipant)
.delegate('input[name="delete"]', "click", delParticipant);
function addParticipant() {
var td, tr, name;
// Obviously you'd use something more modern than `prompt`
name = prompt("Name for new participant: ", "");
if (name) {
// And this code is no thing of beauty, either, but you get the idea
td = $('<td>').text(name);
tr = $('<tr>');
tr.append(td);
tr.append('<td><input type="button" name="delete" value="Delete"></td>');
tr.hide();
$("#participants tbody").append(tr);
tr.fadeIn();
// Note we don't have to do anything to hook the new button;
// delegation handles that
}
}
function delParticipant() {
var tr = $(this).closest('tr');
tr.fadeOut(function() {
tr.remove();
});
}
});
Живая копия
B.Используйте делегирование событий
Но в подобных случаях часто лучше использовать другой метод: делегирование событий.При делегировании события вы подключаете событие («щелчок») к некоторому контейнеру из всех вещей, которые могут получить этот щелчок, а затем, когда происходит щелчок, проверьте, прошло ли событие через какое-либо изсоответствующие элементы (потому что большинство событий, включая «щелчок», «пузырь» от элемента, по которому фактически произошел щелчок, до его родителя, деда и других предков).jQuery упрощает делегирование, используя delegate:
$("selector_for_container").delegate("selector_for_element", "click", function() {
// This will get called if the click matches the element selector
});
или с 1.7 или более поздней версии, используя один из нескольких вариантов on:
$("selector_for_container").on("click", "selector_for_element", function() {
// This will get called if the click matches the element selector
});
(Обратите внимание, что порядок аргументов немного отличается.)
Полный пример (используется delegate, поскольку многие люди еще не подключились к 1.7):
HTML:
(То же, что и выше)
JavaScript:
jQuery(function($) {
$("#participants")
.delegate('input[name="add"]', "click", addParticipant)
.delegate('input[name="delete"]', "click", delParticipant);
function addParticipant() {
var td, tr, name;
// Obviously you'd use something more modern than `prompt`
name = prompt("Name for new participant: ", "");
if (name) {
// And this code is no thing of beauty, either, but you get the idea
td = $('<td>').text(name);
tr = $('<tr>');
tr.append(td);
tr.append('<td><input type="button" name="delete" value="Delete"></td>');
tr.hide();
$("#participants tbody").append(tr);
tr.fadeIn();
// Note we don't have to do anything to hook the new button;
// delegation handles that
}
}
function delParticipant() {
var tr = $(this).closest('tr');
tr.fadeOut(function() {
tr.remove();
});
}
});
Живая копия