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，因为id = \“$ website-＆gt; id \”＆gt;，但每当我的AJAX为我获取新数据时div #resultaat click事件无法再检测到这些ID。有没有人知道如何解决这个问题，或者有人有想法吗？

谢谢你， Yenthe

Answer 1

你可以尝试：

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

同样删除ajax成功中的$('#resultaat').bind('click');，因为它没有做任何有用的事情。

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

在AJAX调用后重新激活click事件

1 个答案: