jQuery добавляет ссылку для удаления управления динамично
Я могу генерировать средства управления, но не могу удалить их. Я пытаюсь добавить 'Ссылку', которая вызовет функцию для удаления динамично созданного управления. Управление и ссылка друг рядом с другом. Вот сценарий Java и разметка для создания управления:
<script type="text/javascript">
$(function() { // when document has loaded
// <input id="File1" type="file" runat="server" size="60" />
var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
$('a#add').click(function() { // when you click the add link
$('<p><input type="file" id="' + i + '" name="' + 'dynamic:' + i + '" /> <a href="#" id="' + 're' + i + ' " onclick="removeControl("' + '\'#' + i + '\''+ '")">+</a></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
i++; //after the click i will be i = 3 if you click again i will be i = 4s
});
function removeControl(controlId) {
$(controlId).remove();
}
}); </script>
<div>
<a href="#" id="add">Add</a>
<br />
<p><input type="file" id="1" /></p>
</div>
Сценарий для создания Ссылки для удаления управления не работает. Атрибут onClick не является разметкой правильно, когда я использую Firebug для наблюдения источника.
<a href="#" id="' + 're' + i + ' " onclick="removeControl("' + '\'#' + i + '\''+ '")">+</a>
Я просто хочу добавить Ссылку для удаления сгенерированного управления и самой ссылки.
Спасибо.
2 ответа
Если вы хотите удалить элемент из Dom, который был включен через javascript, вам нужно подключить или перепривязать обработчик событий.
$('a.remove').live('click', function() {
// Stuff to remove
});
Рабочее решение:
<script type="text/javascript">
$(function() {
// Init counter
var counter = 0;
// Add Elements
$('#add').click(function() {
counter++ // Increment counter
var add_input = '<p><input type="file" />';
var add_link = '<a href="#" class="remove">Remove</a>';
// Append Elements if counter smaller 4
if (counter <= 4) {
$('body').append('<p>' + add_input + add_link + '</p>');
}
return counter;
});
// Remove Elements
$('.remove').live('click', function() {
counter--; // Decrement counter
$(this).parent('p').remove();
});
});
</script>
<a href="#" id="add">Add</a>
FYI-> Всегда сокращайте вставки dom до минимума.
Попробуйте изменить вашу функцию removeControl на такую:
function removeControl(driver) {
$(driver).closest("p").remove();
}
Затем измените вызов функции в вашем якоре на такую:
onclick="removeControl(this);return false;"
Должно получиться...