在已经加载后使用 jquery 加载到 div 元素

Question

我有一个页面，它使用 jquery 和一个简单的导航菜单加载其内部内容。因此，该页面只有一个定期访问的 URL。我的问题是我似乎无法从加载的 div 中获取内容来修改“那个”特定的 div。例如，我有一些类似的东西作为我的 jquery 加载器函数：

$(document).ready(function(){

// load index page when the page loads
$("#response").load("start.html");
$("#home").click(function(){
// load home page on click
    $('#response').load('start.html', function() {
        resizefunc();
    });
});
...

如果我在其中一个加载页面中创建一个元素，该元素使用该加载器函数的 id 链接到 #，单击它只会将焦点移回页面顶部，而不是重新加载我的“响应”div。

Answer 1

由于这些导航元素（即#home）最初不存在，将这些事件绑定到ready 对您没有好处。您需要 live 绑定这些相同的事件或 delegate 从父元素绑定它们。

通过这个简单的测试可以很容易地展示这一点：

alert($("#home").length);

哪个会提醒0

---

试试这个解决方案

$(document).ready(function(){
    $("#response").load("start.html");
    $("#home").live("click", function(){
        $('#response').load('start.html', function() {
            resizefunc();
        });
    });
});

或

$(document).ready(function(){
    $("#response").load("start.html");
    $("#response").delegate("#home", "click", function(){
        $('#response').load('start.html', function() {
            resizefunc();
        });
    });
});

使用live 或delegate 将此选择器绑定到单击而不是常规单击事件将允许分配的函数适用于现在存在和​​将来可能存在的所有选定元素。