JQuery добавление <li>Элемент и нажмите События

Question

Очень плохо знаком с jQuery, если дурацкий вопрос, извините, на данный момент даже не уверен, что я использую правильное словоблудие.

Мне нужно добавить элемент li в ul на основе события щелчка ListBox (пользователь выбирает текст, и новый текст li добавляется с выбранным текстом). И мне нужно добавить значок, ярлык и ввод для элемента li. Значок должен быть значком «удалить».

Как мне подключить функцию для удаления вновь добавленного элемента li через jQuery?

Вот что я пробовал;

        $(function() {
        function addSelectedWordCriteria() {
            var selectedWord = $("#wsWords").val();
            $("#wsCriteriaList").append("<li><a href='#' class='wsCriteriaRemove'><span class='ui-icon ui-icon-circle-close'/></a><em class='wsFilteredWord'>" + selectedWord + "</em><input type='textbox' maxlength='200' class='wsFilteredWords'/></li>");
            $("#wsCriteriaList a:last").bind("click", "removeSelectedWordCriteria");
        };

        function removeSelectedWordCriteria() {
            $("#wsCriteriaList").selected().remove();
        }

    })

<%= Html.ListBox("wsWords", ViewData["Words"] as IEnumerable<SelectListItem>) %>    

<ul id="wsCriteriaList">    
</ul>

Спасибо за любые предложения.

Answer 1

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

    function removeSelectedWordCriteria() {
        $(this).parent().remove();
    }

Другие вещи, которые я могу изменить в этом коде:

1. Как отметил Скотт, это может быть отличным местом для использования новой живой функции. Вне вашего метода addSelectedWordCriteria вы должны иметь возможность ввести:

   $("#wsCriteriaList a").live("click", "removeSelectedWordCriteria");
   

   И это зарегистрирует все ваши теги a с тем же событием, даже когда они будут добавлены.

2. Говоря о тегах, я не уверен, что вам действительно нужны ваши. Все, что вам действительно нужно, - это иметь возможность щелкнуть на отрезке, который содержит удаляемое изображение. Поскольку вы на самом деле не используете ссылку, я бы все вместе вынул якорный тег и поместил событие click непосредственно в тег span. Затем вы можете дать ему класс для вышеуказанной живой функции.

Дайте мне знать, если у вас есть дополнительные вопросы.

Answer 2

Проблема в том, что вы связываете событие щелчка с bind("click", "removeSelectedWordCriteria"), используя параметр data функции bind .

Когда пользователь нажимает кнопку, ничего не происходит, потому что функция обратного вызова не определена.

Вы должны напрямую передать ссылку на функцию или создать анонимную функцию в качестве обработчика:

$("#wsCriteriaList a").bind('click', removeSelectedWordCriteria);

Или

$("#wsCriteriaList a").click(removeSelectedWordCriteria);

или

$("#wsCriteriaList a").click(function(){removeSelectedWordCriteria();});

Answer 3

Вы не используете метод bind должным образом - ваш вызов метода заключен в кавычки.

http://docs.jquery.com/Events/bind#typedatafn