jquery里面的动态生成的html功能不起作用

Question

我抬头看了load方法找到php的替代方案。我得到了负载来动态添加html，它的工作原理。但是，一个问题是该功能无法正常工作。我认为这可能是订单问题，结构问题或纯逻辑。任何帮助让我的函数在动态生成的html中工作将不胜感激。下面的示例结构。

$(document).ready(function() { 
    "use strict"; 

    $("header").load("/_includes/header.html"); 

}); 

$(window).bind("load", function() { 
    "use strict"; 

    $('.class').click(function() { 
     $('#id').slideToggle('fast'); 
    }); 
}); 

Answer 1

如果你里面header.html定义.class元素，那么你需要使用event delegation如下：

$(document).on('click','.class',function() { 
     $('#id').slideToggle('fast'); 
}); 

事件委托应在其上添加控件使用DOM在稍后的部分或在DOM被加载后。

---

UPDATE

当您直接连接事件元素象下面这样：

$('.element').click(function(){ 
.... 
}); 

或如下：

$('.element').on('click',function(){ 
.... 
}); 

这些事件不会得到重视到d在加载之后增加的元素或元素。所以，你需要重视event要么document靶向DOM特别element如下：

$(document).on('click','.element',function(){ 
    ... 
}); 

，或者这是页面加载过程中加载其父。对于防爆：

假设你有如下结构：

<div class="somediv"> 
    <!--Many other children elements here--> 
</div> 

现在，你要么通过append或load或任何其他可能的方式和结构添加一个事件将成为如下：

<div class="somediv"> 
    <!--Many other children elements here--> 
    <button class="element">Click here<button> <!--This is dynamically added element --> 
</div> 

现在您可以将事件附加到.somediv而不是附加到document，因为它在DOM加载期间添加并且新添加的元素将在此内。

这实际上将提高代码的性能，你是明确 告诉从哪里开始jquery搜索的动态 添加.element和jquery可以搜索它来得更快，而不是 从document

遍历

所以你可以把它写成如下：

$('.somediv').on('click','.element',function(){ 
//^^^^parent div   ^^^dynamically added element 
    //do anything here 
}); 

Answer 2

试试这个

$(document).ready(function() { 
    "use strict"; 

    $("header").load("/_includes/header.html", function() { 
     $('.class').click(function() { 
      $('#id').slideToggle('fast'); 
     }); 
    }); 
}); 

Answer 3

使用.live（）对老年人的jQuery版本

$(".class").live("click", function() { 
    $('#id').slideToggle('fast'); 
}); 

老年

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+