如何在每次使用ajax从WebMethod加载数据时运行脚本?

i have a problem that javascript script only loaded once when the page is loading,but i need it every time i get data from WebMethod on the server side

我有一个问题，当页面加载时，javascript脚本只加载一次，但是每次从服务器端WebMethod获取数据时，我都需要它

here is my code:

这是我的代码:

My JavaSript ajax:

我的JavaSript ajax:

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

and here is my javasript that i want it to fire everytime i get data from GetLastArticles WebMethod:

这是我的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>

my aspx page (client side):

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

2 个解决方案

#1

Change to the following and the eventhandler is attached to dynamically added elements too.

更改为以下内容，并将eventhandler附加到动态添加的元素中。

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

Syntax explanation

语法解释

Just to clarify the code. The syntax is as follows:

只是为了澄清代码。语法如下:

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

See the full API on jQuery API documentation. By selecting document we make sure this event handler is loaded to all elements in the document now and in the future.

参见jQuery API文档的完整API。通过选择文档，我们确保这个事件处理程序现在和将来都被加载到文档中的所有元素中。

#2

call your function in ajax success

在ajax成功中调用您的函数。

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

#1