How to bind events to a scrollview's buttons ?

6 posts, 1 answers
  1. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 24 Apr 2014 Link to this post

    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 :)
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 25 Apr 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 29 Apr 2014 in reply to Kiril Nikolov Link to this post

    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
  5. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 30 Apr 2014 Link to this post

    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!
     
  6. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 30 Apr 2014 in reply to Kiril Nikolov Link to this post

    Haaa !!

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

    Thank you for your help :)

    Premium help on this forum, as always!
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 01 May 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready