Блог

Моя текущая настройка загружает динамический список, после чего я создаю событие щелчка с помощью jquery следующим образом:

 $('#listReports li').click(function () {
    var selected = $(this).text();
    alert("List Item: "   selected);
});
 

У меня есть код, который позволяет пользователю сохранять отчет, который добавляется к списку. Новый элемент в списке не запускает событие щелчка, пока я снова не вызову функцию. Проблема с этим заключается в том, что для старых элементов событие запускается дважды.

Вот как я добавляю свои элементы списка и снова вызываю then function:

             $("#save").click(function (e) {

                if ($("#reportParams li").size()> 0) {
                    var fileName = $('#reportFileName').val();

                    if (!fileName) {
                        alert("You must enter a file name!");
                    }
                    else {
                        $('#listReports').append('<li><a href="#">' fileName '</a></li>');

                        $('#listReports li').click(function () {
                            var selected = $(this).text();
                            alert("List Item: "   selected);
                        });
                    }
                }
            });
 

Есть ли способ определить событие щелчка только один раз и заставить его влиять на новые элементы, добавленные в список?

Вместо .click() этого используйте .live() :

 $('#listReports li').live('click', function ()
{
    var selected = $(this).text();
    alert("List Item: "   selected);
});
 

или .delegate() :

 $('#listReports').delegate('li', 'click', function ()
{
    var selected = $(this).text();
    alert("List Item: "   selected);
});