jQuery click function not updating

Question

I am trying to create a slideshow plugin, however, when I try to navigate to the left and right the listener's that are attached to the controls aren't updating

$.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);

When I click on the div "rightCtrl" it fires but an old data-id is being used. While inspecting the html markup the attribute is updating, but the new values aren't being passed. The issues lies within the function loadOverlay:

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

The second argument of `on` (_for event delegation_) should be string (_a selector_) not a jQuery object. — Ram, Aug 11 '14 at 01:03
sorry when I was editting the code I subconsciously added it — user3023421, Aug 11 '14 at 01:27

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

There is difference between properties and attributes. jQuery's .data() method caches the values behind the scenes. It only reads the data-* attribute when there is no cached value for the specified property. For understanding the issue you can check this question: jQuery Data vs Attr?

You should be consistent, either use .attr() or .data() method.

edited May 23 '17 at 12:20

Community

1
1

answered Aug 11 '14 at 01:40

Ram

143,282
16
168
197

jQuery click function not updating

1 Answers1