Question

我的网站上有一个带有AJAX Live Search的index.php页面，它与数据库连接并返回结果。其中一个结果是：

<div id="searchlinktovideo">Video</div>

我还在index.php页面中有代码尝试使用上面的代码执行某些操作，在这种情况下，当用户点击它时动画到页面：

$(document).ready(function () {
$("#searchlinktovideo").click(function () {
    $("#searchpage").animate({
        'left': '-486px'
    }, 200, function () {
        $("#homepage").animate({
            'left': '-486px'
        }, 200, function () {
            $("#videopage").animate({
                'left': '0px'
            }, 200);
        });
    });
});
});

它不起作用，我认为它可能与Html DOM相关，但我不知道从哪里开始解决这个问题。

现在你可以在http://www.squbo.com找到代码（点击搜索并输入'视频' - 结果以HTML格式显示，但是JQUERY不在其中工作））

Answer 1

如果动态添加<div id="searchlinktovideo">Video</div>（它听起来像是这样），那么您的问题可能是您在项目实际位于页面之前尝试安装事件处理程序。这最终无效，因为无法找到该项，因此未安装任何事件处理程序。

有几种可能的解决方案。

您可以使用委托事件处理，该处理适用于动态添加的元素。
您可以在将项目添加到页面后安装事件处理程序。

对于委派事件处理，您可以使用：

$(document).on("click", "#searchlinktovideo", function () {...});

理想情况下，您将使用选择器为静态父级（未动态添加的父级div）而不是$(document)，而不是#searchlinktovideo。

Answer 2

一旦页面准备就绪，你就会看到jquery查找searchlinktovideo但是在页面准备就绪之后ajax请求就完成了，所以当它搜索它时它什么也找不到。你需要使用

$( document ).ajaxComplete(function() {
 $("#searchlinktovideo").click(function () {
 ..
 ..
 ..
 });

});

简单的HTML DOM单击“问题”

2 个答案: