Как сделать сценарий запуска каждый раз, когда я загружаю данные из WebMethod с помощью ajax?

Question

У меня есть проблема, что Javascript сценарий загружена только один раз, когда страница загружается, но мне нужен каждый раз, когда я получаю данные из WebMethod на стороне сервера

вот мой код:

Моего Аякс Javasript:

<script type="text/javascript"> 


    $(document).ready(function() { 

     function InfiniteScroll() { 

      $('#divPostsLoader').html('<img src="img/loader.gif">'); 

      $.ajax({ 
       type: "POST", 
       url: "Home.aspx/GetLastArticles", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        if (data != "") { 

         $('#divPostsLoader:last').after(data.d); 

        } 
        $('#divPostsLoader').empty(); 
       }, 
       error: function (data) { 
        if (!document.getElementById('#divPostsLoader').innerHTML == "<p>END OF POSTS</p>") 
         $('#divPostsLoader').empty(); 
        $('#divPostsLoader').html("<p>END OF POSTS</p>"); 
       } 
      }) 

     }; 
     var b = false; 
     //When scroll down, the scroller is at the bottom with the function below and fire the lastPostFunc function 
     $(window).scroll(function() { 

      if ($(document).height() <= $(window).scrollTop() + $(window).height()) { 
       InfiniteScroll(); 

      } 

      b = true; 
     }); 
     if (!b) { 

      window.onload = function() { 
       InfiniteScroll(); 

      }; 

     } 
    }); 

</script> 

и вот мой Javasript, что я хочу, чтобы стрелять каждый раз я получаю данные из GetLastArticles WebMethod:

<script type="text/javascript"> 
    $(".tag_button").on('click', function (e) { 
     e.preventDefault(); // prevent default action - hash doesn't appear in url 
     $(this).parent().find('div').toggleClass('tags-active'); 
     $(this).parent().toggleClass('child'); 


    }); 
</script> 

мою страницу ASPX (на стороне клиента):

<div class="tags_list"> 
            <a class="tag-icon tag_button" href="#" >Tags</a> 
            <div class="tags"> 
             <a class="tag-icon" href="#" >Tag1</a> 
             <a class="tag-icon" href="#">Tag2</a> 
             <a class="tag-icon" href="#">Tag3</a> 
             <a class="tag-icon" href="#">Tag4</a> 
             <a class="tag-icon" href="#">Tag5</a> 
             <a class="tag-icon" href="#">Tag6</a> 
             <a class="tag-icon" href="#">Tag7</a> 
            </div> 
           </div> 

Answer 1

Изменение к следующему и EventHandler прикрепляется к динамически добавляемые элементы тоже.

$(document).on('click', '.tag_button', function() {...}); 

Синтаксис объяснение

Просто уточнить код. Синтаксис выглядит следующим образом:

$(document).on(events, cssSelector, handler); 

Смотрите полный API on jQuery API documentation. Выбрав document, мы убеждаемся, что этот обработчик событий загружается ко всем элементам документа сейчас и в будущем.

Answer 2

называют вашу функцию в Ajax успеха

success: function (data) { 
     if (data != "") { 
       $('#divPostsLoader:last').after(data.d); 
     } 
     $('#divPostsLoader').empty(); 
     $(".tag_button").click(); 
},