Question

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

$.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”时，它会触发但是正在使用旧的data-id。在检查html标记时，属性正在更新，但新值未被传递。问题在于函数loadOverlay：

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

Answer 1

属性和属性之间存在差异。 jQuery的.data()方法缓存幕后的值。只有在指定属性没有缓存值时，它才会读取data-*属性。要了解此问题，您可以查看以下问题：jQuery Data vs Attr?

您应该保持一致，使用.attr()或.data()方法。

jQuery单击功能不更新

1 个答案: