调用AJAX后重新激活点击事件

Question

我制作了一个网页，只要用户在随机链接（href）上点击了两次以上，就会通过Ajax动态获取新数据。 每次单击我都需要检测单击按钮的ID。 这是通过以下代码完成的：

$(document).on("click", ".buttonsMainpage", function(event) {
        numberOfClicks += 1;
        idOfWebsite = event.target.id || this.event.srcElement;

现在，只要单击两次以上，Ajax函数就会刷新DIV的内容，问题就会出现。 这是通过以下功能完成的：

function haallinks() {
    $.ajax({type: "GET",
        async: false,
        url: site_url + "/index/readWebsiteLinks",
        data: {id: $('#categorieId').val()},
        success: function(result) {
            $("#resultaat").html(result);
            $('#resultaat').bind('click');
        }
    });
}

不知何故，每次我的Ajax获取新数据并将其放入div（#resultaat）时，我都无法再检测到我的ID。 事不宜迟，这是我的完整代码，因此您可以看到整个图片：

<script type="text/javascript">
    var focusedOrNot = 2;
    var idOfWebsite;
    var bothEventsOrOne = 0;
    var numberOfClicks = 0;
    function haallinks() {
        $.ajax({type: "GET",
            async: false,
            url: site_url + "/index/readWebsiteLinks",
            data: {id: $('#categorieId').val()},
            success: function(result) {
                $("#resultaat").html(result);
                $('#resultaat').bind('click');
            }
        });
    }

    function websiteTellerVerhogenInDb() {
        $.ajax({type: "POST",
            url: site_url + "/index/websiteCount",
            data: {id: idOfWebsite}
        });
    }

    function styleSwitcher() {
        var cId = $('#categorieId').val();
        if (cId == 3)
            $("link[kleur=true]").attr("href", thema_url + "red.css");
        if (cId == 0)
            $("link[kleur=true]").attr("href", thema_url + "purple.css");
    }


    $(document).ready(function() {
        $("#categorieId").change(function() {
            haallinks();
            styleSwitcher();
            $('#resultaat').fadeOut(1000).fadeIn(1000);
            showTextMessage();
        })
    });


    $(document).on("click", ".buttonsMainpage", function(event) {
        numberOfClicks += 1;
        idOfWebsite = event.target.id || this.event.srcElement;
        alert(idOfWebsite);
        websiteTellerVerhogenInDb();
        if (numberOfClicks >= 2)
        {
            haallinks();
            setTimeout(function() {
                userOnWebsiteOrNot();
            }, 2000);
            numberOfClicks = 0;
        }
    });

    function userOnWebsiteOrNot()
    {
        if (focusedOrNot === 0)
        {
            $('#resultaat').fadeOut(1000).fadeIn(1000);
            showTextMessage();
        }
        else
        {
            controlerenActiefOfNiet();
            window.setTimeout(function() {
            }, 3000)
        }
    }

    function controlerenActiefOfNiet()
    {
        setTimeout(function() {
            userOnWebsiteOrNot();
        }, 2000);
    }

    window.addEventListener('focus', function() {
        setTimeout(function() {
            document.title = 'focused';
            focusedOrNot = 0;
        }, 300);
    });


    window.addEventListener('blur', function() {
        setTimeout(function() {
            document.title = 'not focused';
            focusedOrNot = 1;
        }, 300);
    });

    function showTextMessage()
    {
        setTimeout(function() {
            if (bothEventsOrOne == 0)
            {
                $('#tekstNewButtons').html('<h3>You have new buttons!<h3> ').fadeIn(3000).slideUp(3000).fadeOut(3000);
                bothEventsOrOne += 1;
            }
            else
            {
                $('#tekstNewButtons').html('<h3>You have new buttons!<h3> ').slideDown(0).slideUp(3000).fadeOut(3000);
            }
        }, 1000);
    }
</script>

HTML / PHP部分：

<div id="resultaat">
    <table>
        <tr>
            <?php
            for ($teller = 1; $teller < 21; $teller++) {
                $website = $websites[$teller];
                echo "<td><a class=\"buttonsMainpage\" href=\"$website->websitelink\" target='_blank' id=\"$website->id\"></a></td>";
                if ($teller % 5 == 0 && $teller > 0 && $teller < 20) {
                    echo "</tr><tr>";
                }
            }
            ?>
        </tr>
    </table>
</div>

简短版：每次我在div #resultaat中单击一个按钮时，由于id = \\“ $ website-> id \\”>，我可以获取其ID，但是每当我的AJAX为div #resultaat获取新数据时，事件无法再检测到这些ID。 有人对如何解决此问题有任何线索或有人有想法吗？

谢谢你，恩特

Answer 1

你能试一下吗：

$("body").on("click", ".buttonsMainpage", function(event) {
    numberOfClicks += 1;
    idOfWebsite = event.target.id || this.event.srcElement;
    console.log(idOfWebsite);
});

同时删除该$('#resultaat').bind('click'); 在ajax中成功，因为它没有任何用处。

如果您不想在主体上的任何其他位置跟踪.buttonsMainpage ，则只要在click事件的选择器上尽可能具体，只要该元素不是动态的即可。 如果该链接仅存在于#resultaat div中$("#resultaat").on("click", ...则甚至可能是$("#resultaat").on("click", ...