如何重啟JS功能？

Question

我有一個“喜歡”按鈕的腳本。 當我單擊按鈕時，AJAX將數據發送到videolike.php

1. 首先，我使用限制為10的 PHP從數據庫中獲取視頻

2. 加載此腳本后...

    <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> 

現在我的主頁上有10個視頻，腳本運行正常。 將數據發送到videolike.php而不進行重定向...

問題是此腳本僅適用於前10個視頻，'不適用於我從數據庫獲得的下一個視頻，將我重定向到videolike.php ...

這是我用來獲取更多數據的腳本：

<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>

Answer 1

您將要使用委托事件處理程序。

這將附加一個偵聽器，並將單擊的目標與選擇器（在這種情況下為.vidlike 。

即使您通過添加更多結果來修改DOM，這也將起作用。

$('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.
});

有關更多信息，請參見.on（）的文檔。