Javascript jQuery单击函数未更新

我正在尝试创建一个幻灯片插件，但是，当我尝试向左和向右导航时，附加到控件的侦听器没有更新

$.fn.imageOverlay = function () {
    return this.each(function () {
        var $this = $(this);

        $this.click(function () {
            //load paramters and stuff

            $.ajax({
                //stuff
                success: function(data) {
                    loadOverlay(data);
                }
            });
        });

        var loadOverlay = function() {
            jQuery(document).on('click', '.rightCtrl', function () {
                var id = $(this).data('id');

                console.log(id);

                $.ajax({
                    type: "POST",
                    url: domain + "loadajax/get_photo_overlay",
                    data: { id: id, type: params.type, criteria: params.criteria },
                    dataType: 'json',
                    success: function (data) {
                        setData(data);
                    }
                });
            });
        };

        var setData = function (data) {
            $('.rightCtrl').attr('data-id', data.controls.right);
        };
    });
})(jQuery);

当我单击div“rightCtrl”时，它会触发，但正在使用一个旧的数据id。在检查html标记时，该属性正在更新，但没有传递新值。这些问题存在于函数loadOverlay中：

jQuery(document).on('click', '.rightCtrl', function () {
    var id = $(this).data('id'); //this is an outdated value
}

---

属性和属性之间存在差异。jQuery的

.data（）

方法在后台缓存值。当指定属性没有缓存值时，它仅读取

数据-*

属性。要了解问题，您可以检查以下问题：

---

您应该保持一致，可以使用

.attr（）

或

.data（）

方法。

上

的第二个参数（用于事件委派）应该是字符串（选择器），而不是jQuery对象。对不起，在编辑代码时，我下意识地添加了它