How to bind events to a scrollview's buttons ?

[Yohann]

Hello,

I have a small scroll view generated dynamically when I retrieve some data from the server.

Basically, I have the following template:

<script id="friendsToInvite-template" type="text/x-kendo-template">
            <p class="friendName">#= name #</p>
            <div style="width: auto; height: 180px; background: url('https://graph.facebook.com/#= fbId #/picture?type=large')  no-repeat center;"></div>
            #if( invited ) {#
                <p class="friendsButtons"><button class="button2 btn-green unInvite" data-fbid="#= fbId #" data-eventid="#= eventId #">Invited</button></p>
            #} else {#
                <p class="friendsButtons"><button class="button2 btn-orange invite" data-fbid="#= fbId #" data-eventid="#= eventId #">Invite</button><!-- /*<button class="button2 btn-grey">Dont show me again</button>*/ --></p>
            #}#
        </script>

As you can see, I have a button with a class of invite or uninvite depending on the scenario.
In my js, I have a event listener binded to the on click action that trigger a js function. But unfortunately, I'm noticing that after the second element, the buttons do not trigger the js function as they are generated when the user scroll from an element to another ( I believe its better for perfs, great) 


So my question is, how do I bind an event to my button in this scroll view for every element generated by Kendo UI when a user is swiping from an element to another ? If possible, I'd like to avoid listening for a user moving from an element to the other to rebind my buttons again (and onclick does not work on phonegap I think).

Thank You :)

[Kiril Nikolov]

Hello Yohann,

Can you please create an example in a Kendo UI Dojo project, where the issue is reproduced, so we can advise you further?

Thank you for the cooperation.

Regards,
Kiril Nikolov
Telerik

 

 

[Yohann]

I have tried to reproduce it but can;t have the test working at all ..

You'll find it here: http://trykendoui.telerik.com/uVOz/2

Otherwise, it should demonstrate that after the second element of the scroller, when clicking on invite, the text doesn;t change anymore which proves that the button is not binded anymore.

Thanks

[Kiril Nikolov]

Hi Yohann,

The title of the button is not changed, because when you attach the click handlers the elements is not yet rendered in the DOM, and the click is not fired when you press the button. You can use dynamic click handler attachments, so the click is correctly fired. Here is an updated example:

http://jsbin.com/xukit/1/edit

Regards,
Kiril Nikolov
Telerik

 

 

[Yohann]

Haaa !!

I can't believe it was a simple jquery mistake !!

Thank you for your help :)

Premium help on this forum, as always!

[Kiril Nikolov]

Hi Yohann,

I am glad I helped and I am also glad to hear that you are happy with our services.

Regards,
Kiril Nikolov
Telerik