This is a migrated thread and some comments may be shown as answers.

How to bind events to a scrollview's buttons ?

5 Answers 63 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Yohann
Top achievements
Rank 1
Yohann asked on 24 Apr 2014, 06:33 AM
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 :)

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 25 Apr 2014, 10:44 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yohann
Top achievements
Rank 1
answered on 29 Apr 2014, 07:09 AM
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
0
Accepted
Kiril Nikolov
Telerik team
answered on 30 Apr 2014, 10:44 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yohann
Top achievements
Rank 1
answered on 01 May 2014, 12:00 AM
Haaa !!

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

Thank you for your help :)

Premium help on this forum, as always!
0
Kiril Nikolov
Telerik team
answered on 01 May 2014, 05:21 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ScrollView (Mobile)
Asked by
Yohann
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Yohann
Top achievements
Rank 1
Share this question
or