Ajax achor превращается в обычный якорь после завершения запроса ajax!

Question

Я использую следующую функцию Ajax для отправки запроса.Хотя происходит нечто странное.Когда запрос завершен, новая кнопка, которая возвращается, не включена AJAX.Он действует как обычный якорь.

$(document).ready(function() {
    $(".UIButton a").click(function(e) {
        e.preventDefault();

        if (! $(this).data("isClicked"))
        {
            var requestData = $(this).attr("href");
            var link = $(this);

            $.ajax({
                context: this,
                dataType: 'js',
                url: requestData,

                beforeSend: function() {
                    $(link).fadeOut("slow");
                },

                error: function() {
                },

                success: function(response) {
                    $(link).parent().html(response);
                       $(link).stop().fadeIn("slow");
                }
            });

            // Toggle isClicked to prevent button mashing
            link.data("isClicked", true);

            // Create timeout to restore button
            setTimeout(function() { link.removeData("isClicked") }, 1000);
        }
    });
});

Вот что возвращается с сервера, и это правильно: <a class="delete" href="/users/delete/3333">Delete</a>

Вот оригинальная кнопка:

<div class="UIButton">
   <a class="Add" href="/users/add/3333">Add</a>
</div>

Answer 1

Поскольку ссылка не существовала, когда вы изначально связывали прослушиватель событий с событием click, вам необходимо повторно связать событие (используя bind в вашей функции успеха) или использовать delegate или live для привязки обработчиков событий к событиям (рекомендуется).

Использование delegate или live гарантирует, что событие будет обработано для соответствующих элементов сейчас и в будущем.

Вот как вы могли бы сделать это с помощью delegate:

$("containing-element-selector").delegate(".UIButton a", "click", function() { 
    ... 
});

(это рекомендуемый метод)

или с live:

$(".UIButton a").live("click", function() {
    ....
});

Answer 2

Это потому, что функция .click() влияет только на существующие элементы DOM.Попробуйте использовать .live("click", function() {your_function_here}) вместо этого.

См. http://api.jquery.com/live/ для получения дополнительной информации