Question

我试图重写一些脚本。此脚本从数据属性中获取一些数据并使用它们重建块。一切都很好，但我需要通过AJAX来做。这是我修改过的脚本：

(function($){
jQuery.fn.someItem = function()
{
    var make = function() {
        var _$this = $(this);
        var $thumb = _$this.find('.thumb');

        function init()
        {
            $thumb.on('click', function()
            {
                if (!$(this).hasClass('active')) setNewActiveItem($(this));
                return false;
            });
        }

        function setNewActiveItem($newItem)
        {
            $.ajax({
                url: '/ajax-item?id=' + $newItem.data('id'),
                type: 'GET',
                success: function(response)
                {
                    _$this.replaceWith(response);
                    **init();**
                }
            });
        }
        init();
    };

    return this.each(make);
};
})(jQuery);

一切正常，但在Ajax调用和块替换后，我无法再次在修改后的块中应用ajax-call。我想我需要重新启动＆＃34; init（）＆＃34;函数＆＃34; replaceWith（）＆＃34;，但怎么做？谢谢你的帮助。

Answer 1

将click事件附加到init()元素时，您需要在.thumb中使用委派事件处理程序。试试这个：

var make = function() {
    var _$this = $(this);

    function init() {
        _$this.on('click', '.thumb', function() {
            if (!$(this).hasClass('active')) 
                setNewActiveItem($(this));
            return false;
        });
    }

    function setNewActiveItem($newItem) {
        $.ajax({
            url: '/ajax-item?id=' + $newItem.data('id'),
            type: 'GET',
            success: function(response) {
                _$this.replaceWith(response);
            }
        });
    }
    init();
};

这可以通过将单击处理程序分配给父元素并检查click事件，因为它冒泡DOM。这意味着您可以随时附加任何.thumb元素，而不必重新分配任何新的点击处理程序，因为在父项上定义的那个将捕获所有。

ajax之后重新启动功能

1 个答案: