CODEWITHSUNDEEP
javascriptjqueryhtml
Prisoner ZERO
Prisoner ZERO

Reputation: 14166

Why doesn't my event trigger for both subscribers?

I've re-written the pagination plug-in, and it works perfectly when I bind to the plug-in using explicit Id's. However, when I bind the plug-in using class-names the "page selected" event only triggers for ONE element.

So, my question is...

Why doesn't the trigger fire for both elements?

Just to be clear...the trigger raises twice, but the bind doesn't run twice...this is evident as the console getS written-to only once!

THE CODE IS LOCATED AT:
The JS Fiddle

THE OFFENDING AREA IS:

<script type="text/javascript">
    $(document).ready(function () {

        var pageSize = 5;
        $('.grid-bar-pager').pagination({
            itemsPerPage: pageSize,
            numberDisplayEntries: 10,
            numEdgeEntries: 2,
            maxEntries: 10
        });

        $('.grid-bar-pager').data('pagination').bind("pageSelected", function (event, args) {
            console.log("pageSelected"); // <--- THIS ONLY FIRES once?
        });
    });
</script>

Upvotes: 2

Views: 75

Answers (1)

Pointy
Pointy

Reputation: 413737

I see the problem now. You're binding the event handler like this:

$('.grid-bar-pager').data('pagination').bind( ... );

The call to .data() will return the Controller object for the first matched element only. You should do that binding in a .each() loop so you can bind to every Controller object:

$('.grid-bar-pager').each(function() {
  $(this).data('pagination').bind( ... );
});

Upvotes: 2

Related Questions