調用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", ...