How to restart JS function?

Question

I have a script for "like" button. When I am clicking to button, AJAX sending data to videolike.php

First I am getting videos from database using PHP with limit 10

After this is loading this script...

<script type="text/javascript">
     $(".vidlike").click(function() {
     var form = $(this).closest(".vidlikform");

     $.ajax({
          type: 'post',
          url: "functions/videolike.php",
          data: form.serialize(), // serializes the form's elements.
          success: function(data)
          {
              alert(data); // show response from the php script.
          } 
     });
     return false; // avoid to execute the actual submit of the form.
});
</script>

Now I have 10 videos in my HOME page, The script is working fine. Sending data to videolike.php without redirecting...

The problem is this script is working only for first 10 videos, 'its not working for next videos i got from database, redirecting me to videolike.php...

This is the script I am using for get more data:

<img class="load-more" id="<?php echo @$var['video_id']; ?>" src="img/loader.gif"/>

<script type="text/javascript">
    //Ajax more data load Home page
    $(document).ready(function(){
        $(window).scroll(function(){
            var lastID = $('.load-more').attr('id');
            if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
                $.ajax({
                    type:'POST',
                    url:'functions/getData.php',
                    data:'id='+lastID,
                    beforeSend:function(html){
                        $('.load-more').show();
                    },
                    success:function(html){
                        $('.load-more').remove();
                        $('#main').append(html);
                    }
                });
            }
        });
    });

    </script>

$(".vidlike").on("click",.. should be $(window).on("click",".vidlike",.. — Jonas Wilms, Jun 12 '17 at 15:09
you can add normal `onclick function()` instead of jquery click event, because those are only rendered on page load. — Bhaumik Pandhi, Jun 12 '17 at 15:10
You need to modify your php script to handle pagination, in other words, getting ids with offset. — Anuga, Jun 12 '17 at 15:15
@Jonasw I tryed but not working. Redirecting the page to **videolike.php** — halid96, Jun 12 '17 at 15:16
look into pub/sub design pattern then you can broadcast events to functions which listen for updates, you can then re-apply event handlers onto the DOM which has been loaded via ajax. or just repeat your "click" code within the callback of your "scroll" code. — Lawrence Cherone, Jun 12 '17 at 15:18
@halid96 https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Jonas Wilms, Jun 12 '17 at 15:19
Yes I can, include your getData.php script in your question. — Anuga, Jun 12 '17 at 15:21
@Anuga I tryed this already, its working but 2 times, becouse its included 2 times.. — halid96, Jun 12 '17 at 15:25
Actually guys i think the problem is not in **getData.php** or **GetData JS** , After I fetch 10 videos with PHP, the **like** script is working only for first 10, becouse the next 10 videos i got from database are included after **like** script... I think i need to reload/refresh my function maybe.. — halid96, Jun 12 '17 at 15:31

score 0 · Accepted Answer · answered Jun 12 '17 at 18:12

You will want to use a delegated event handler.

This will attach a single listener, and compares the clicked target against the selector, in this case .vidlike.

This will work even if you modify the DOM by adding more results.

$('body').on("click", ".vidlike", function() {
     var form = $(this).closest(".vidlikform");

     $.ajax({
          type: 'post',
          url: "functions/videolike.php",
          data: form.serialize(), // serializes the form's elements.
          success: function(data)
          {
              alert(data); // show response from the php script.
          } 
     });
     return false; // avoid to execute the actual submit of the form.
});

See the docs for .on() for more info.

@halid96 If this solved your problem, then click the gray checkmark on the left of my answer so it turns green :) — styfle, Jun 13 '17 at 14:17

How to restart JS function?

1 Answers1