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），或使用{{ 1}}或live将事件处理程序绑定到事件（推荐）。

使用delegate或delegate可确保现在和将来在匹配的元素上处理事件。

以下是使用delegate完成此操作的方法：

live

（这是推荐的方法）

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

live

Answer 2

这是因为.click()函数只影响当前存在的DOM元素。请尝试使用.live("click", function() {your_function_here})。

有关详细信息，请参阅http://api.jquery.com/live/

Ajax achor在完成ajax请求后变为普通锚点！

2 个答案: