0

我制作了一个网页，只要用户在随机链接（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。有没有人知道如何解决这个问题或者有任何想法？

谢谢你，延特

4

1 回答 1

0

你能试一下吗：

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

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

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

于 2013-07-20T18:53:22.880 回答