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

【问题标题】：Re-activating click event after AJAX callAJAX调用后重新激活点击事件
【发布时间】：2013-07-19 20:29:45
【问题描述】：

我制作了一个网页，只要用户在随机链接 (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->id\">，但是每当我的 AJAX 为我的 div 获取新数据时 #结果在点击事件中无法再检测到这些 ID。有没有人知道如何解决这个问题或有任何想法？

谢谢你，延特

【问题讨论】：

一件事，你为什么不使用dblclick 事件呢？双击时触发。
因为我的按钮只需单击一下，我需要它来监控单击，所以 dblclick 事件对我来说毫无用处
哦，好的。在您的 AJAX 函数中，您不能尝试删除：$('#resultaat').bind('click');
他们确实点击并继续按应有的方式工作。我唯一的问题是 idOfWebsite = event.target.id || this.event.srcElement;在我的 ajax 调用获取新数据并将其放入我的 div 后，无法再检测到我的 id。似乎 JavaScript 无法检测到它背后的新值或其他东西：s
您是否检查了元素并确保您的 AJAX 实际上添加了一个 id？

标签： javascript jquery ajax javascript-events onclick

【解决方案1】：

你可以试试：

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

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

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

【讨论】：