Как скрыть элемент dom после создания его на лету с помощью JQuery?

Question

Я пытаюсь создать форму, в которой пользователи могут добавить текстовое поле, нажав кнопку «Добавить опцию». Они также могут удалять добавленные поля с помощью ссылки «удалить параметр», созданной на лету Jquery, вместе с текстовым полем.

JavaScript:

$(document).ready(function(){
    $("#add_option").click(function()
      {
        var form = $("form");
        var input_field = '<input type="text" />';
        var delete_link = '<a href="#">remove</a>';
        form.append(input_field + delete_link);

        return false;
    });

    $("a").click(function()
    {
        alert('clicked');
        return false;
    });
});

Когда я нажимаю кнопку «add_option», появляется новое текстовое поле и «delete_link». Но при нажатии на ссылку «delete_link», созданную JQuery, браузер переходит по ссылке, вместо того, чтобы открывать всплывающее окно, отображающее «clicked».

Как скрыть элемент dom после создания его на лету с помощью JQuery?

Answer 1

Я бы использовал делегат, потому что он использует меньше пузырей:

$(document).delegate("a", "click", function(){
 alert('clicked');
});

РЕДАКТИРОВАТЬ , вот ваш код, который нужно изменить:

$(document).ready(function(){
       $("#add_option").click(function(){
               var form = $("form");
               var input_field = '<input type="text" />';
               input_field.addClass = "dynamic-texfield";
               var delete_link = '<a href="#" class="delete-trigger">remove</a>';
               form.append(input_field + delete_link);

               return false;
           });

Затем следует делегатская часть:

$(document).delegate(".delete-trigger", "click", function(){
     alert('ready to delete textfield with class' + $(".dynamic-texfield").attr("class"));
});

Answer 2

Я не понимаю, почему вы используете <a> в качестве кнопки для выполнения функции в jQuery. У вас есть все инструменты, которые вам необходимы, чтобы полностью обойти старые традиции HTML.

Просто поместите определение css cursor:pointer на кнопку, которую вы хотите казать "интерактивной", добавьте текстовое оформление, если вам нравится, а затем определите свою функцию с помощью jQ:

$('.remove-button').live('click', function() {
    $(this).parent().remove();
}

Answer 3

Попробуйте связать обработчик для <a> с "live"

$('a').live('click', function() { alert("clicked); });

Вы, вероятно, должны квалифицировать эти <a> ссылки с классом или чем-то.