基本jQuery的.load

的index.html

<script> 
$(document).ready(function(){ 
    $("#content").load('page.html'); 

    $("#menu").click(function() { 
     alert('Hello'); 
    }); 
}); 
<script> 

<div id="content"></div>

和page.html中

<div id="menu"> 
    <ul> 
     <li><a href="#">Link</a></li> 
    </ul> 
</div>

的.load工作.. 但報警功能不工作

我必須，但在page.html中的函數??? 還是有另一種方式？

來源

2012-02-20 dev.bashar

問題是您的代碼綁定到#menu在子頁面加載之前運行。你需要要麼使用on或做它運行，一旦加載完成

$(document).ready(function(){ 
    $("#content").load('page.html', function() { 
     $("#menu").click(function() { 
     alert('Hello'); 
     }); 
    }); 
});

與on

$(document).ready(function(){ 
    $('#content').load('page.html'); 

    $('#content').on('click', '#menu', function() { 
     alert('Hello'); 
    }); 
});

來源

2012-02-20 21:13:16 JaredPar

版本由於內容是動態加載回調裏面綁定，你需要使用live()（對於jQuery < 1.7）或on()（1.7+）。

這些函數將事件委託給動態元素以及在頁面加載時存在的事件。

下面是它會怎樣看與on()：

$(document).on("click", "#menu", function(){ 
    alert("Menu clicked.") 
});

來源

2012-02-20 21:13:42 Purag

這實際上是行不通的 - '＃菜單'需要在代碼運行時出現，而不是。你在他的原始代碼中遇到與OP相同的問題。你可以在加載回調中綁定事件，或者執行'$（document）.on（「click」，「#menu」，function（）'（並且我沒有倒下，以防萬一有人跟着我和） – 2012-02-20 21:27:21

@AdamRackis：完全沒有意識到這一點，謝謝！ – Purag 2012-02-20 22:16:45

完全沒有問題！:) – 2012-02-20 22:18:29

由於與菜單的ID的元素被加載，你需要使用on

<script> 
$(document).ready(function(){ 
    $("#content").load('page.html'); 

    $(document).on('click', '#menu', function() { 
     alert('Hello'); 
    }); 
}); 
<script> 

<div id="content"></div>

來源

2012-02-20 21:13:58

圍繞'document'的引號需要刪除，因爲它不是選擇器而是對象。 – Purag 2012-02-20 22:21:24

基本jQuery的.load

回答

相關問題