如何隐藏AJAX调用生成的DIV

Question

我有一个关闭div的简单脚本。示例如下：http://jsfiddle.net/22fTm/3/

然而，我的问题是，DIV"框"仅在ajax调用之后生成，ajax调用是搜索php脚本的一部分。

知道我需要什么才能让它发挥作用吗？类似的问题：如何在AJAX调用中隐藏元素？

Answer 1

由于元素是动态创建的，因此必须使用on或delegate，即使元素是动态添加的，它们也会负责触发事件。

使用on

$(function(){
    $(document).on("click", "div.box a.close", function() {
        $(this).parent("div.box").fadeOut();
    });
});

on()参考：http://api.jquery.com/on/JQuery版本1.7+

演示

使用delegate

$(function(){
    $(document).delegate("div.box a.close", "click", function() {
        $(this).parent("div.box").fadeOut();
    });
});

delegate()参考：http://api.jquery.com/delegate/

演示

Answer 2

.live将有所帮助：）http://api.jquery.com/live/

但您也可以默认显示div，并将其设置为display:none，然后在某个人进行搜索时立即切换div。。。

Answer 3

当您使用AJAX动态插入元素时，任何使用原始.bind()或.click()方法注册的处理程序都不会工作，因为它们只适用于当时已经在DOM中的元素。

您需要：

1. 在将内容添加到DOM后重新注册处理程序，或者
2. 使用.on()（如果您使用的是jQuery 1.7+）来注册一个"活动"处理程序，该处理程序甚至可以在注册处理程序后创建的元素上工作

例如：

$(document).on('click', '.search-sbox .close', function() {
    ....
});

如果使用1.7之前的jQuery，请改用.live()。

Answer 4

尝试将其更改为

$(function(){
    $("div.box a.close").live("click", function() {
        $(this).parent("div.box").fadeOut();
    });
});

live（）用于支持事件处理程序，也是在加载dom之后。

Answer 5

这通常取决于您希望它何时隐藏？

例如，您可以使用

$('.select').live('click',function (){
    $('div').hide();
});

您也可以使用委派、

此外，如果必要的话，您可以在ajax成功时使用它。

Answer 6

下面的Javascript应该可以工作，它使用jquery的委托函数，因为live在jquery 中是不推荐使用的

$("#searchresultdata").delegate("a.close", "click", function() {
    $(this).closest("div.box").fadeOut();
});

Answer 7

您需要延迟事件。在您的情况下，为您的网站使用此代码：

$('#searchresultdata').delegate('div.search-sbox a.close', 'click', function() {
    $(this).parent("div.search-sbox").fadeOut();
});