如何隐藏由AJAX调用生成的DIV?

时间:2012-01-30 15:24:40

标签: javascript jquery

我有一个关闭DIV的简单脚本。这里有一个例子:http://jsfiddle.net/22fTm/3/

我的问题是,DIV“box”仅在ajax调用之后生成,这是搜索php脚本的一部分。

知道我需要做些什么吗?类似的问题:How to hide an element on an AJAX call?

7 个答案:

答案 0 :(得分:2)

由于元素是动态创建的,因此您必须使用ondelegate来处理事件,即使动态添加元素也是如此。

使用on

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

on()参考:http://api.jquery.com/on/ JQuery ver 1.7 +

<强> Demo

使用delegate

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

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

<强> Demo

答案 1 :(得分:1)

.live会帮助:) http://api.jquery.com/live/

但你也可以默认显示div并将其设置为display:none,然后在有人进行搜索时立即切换div ...

答案 2 :(得分:1)

使用AJAX动态插入元素时,使用原始.bind().click()方法注册的任何处理程序都不起作用,因为它们仅适用于当时已存在于DOM中的元素。 / p>

您需要:

  1. 在将内容添加到DOM后重新注册处理程序,或
  2. 使用.on()(如果你使用jQuery 1.7+)注册一个“实时”处理程序,它甚至可以在处理程序注册后创建的元素上运行。
  3. e.g:

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

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

答案 3 :(得分:0)

尝试将其更改为

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

live()用于支持事件处理程序,也是在加载dom之后。

答案 4 :(得分:0)

这通常取决于你什么时候想要它隐藏?

例如,您可以使用

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

您也可以使用委托

另外,如果需要,你可以在ajax成功时使用它

答案 5 :(得分:0)

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

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

答案 6 :(得分:0)

您需要委派活动。在您的情况下,请为您的网站使用此代码:

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