jquery - 当链接位于内部时刷新 Div 不起作用

Question

我试图完成的是刷新 DIV 内的数据而不重新加载整个页面，但它没有按预期工作。

我有这个 Jquery 代码:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script> 
$(document).ready(function() {
    $('#Col1').on('click', function() {
    var url = 'PurchaseRequestList.asp?order2=PRID';        
    $('#div1-wrapper').load(url + ' #div1'); 
    }); 
});
</script>

下面是 HTML 代码

<div id="div1-wrapper">
    <div id="div1" style="border:solid 1px red; width: 100%;"> 
        <table width="90%" align="center" class="RowDetail">
            <tr>
                <td><a id="Col1">Column1</a></td>
                <td>Column2</td>
                <td>Column3</td>
                <td>Column4</td>
            </tr>
    </div>
</div>

如果我将链接(如下)移到 DIV 之外，它将起作用。但如果下面的链接位于正在刷新数据的 DIV 内部，则仅在第一次单击时有效，之后就停止工作。

<a id="Col1">Column1</a>

如果可能，请帮助提供示例代码。

Answer 1

只需更改:

$('#Col1').on('click', function() {

到

$(document).on('click', '#Col1', function(e) {

<小时/>

这是直接事件与委托(delegate)事件的老争论。通过使用委托(delegate)事件，您可以确保动态添加的元素维护该事件链。在较新的版本中，如您的示例中所示(使用 .on)，您可以将 .on 委托(delegate)给您想要定位的元素的父级，或者文档本身。许多人认为针对文档是不好的做法，因为他们声称存在开销问题。就我个人而言，自从 .on 推出以来，我就一直在使用这种方法，并在至少 3 个每天有数千名访客的程序上使用过它，而且没有收到任何投诉。我想说的是，除非您正在制作纯 JS 视频游戏，否则请坚持使用 $(document) 因为它更容易跟上并允许您根据需要不断地“chain”委托(delegate)事件，而无需曾经记忆过$(document)

<小时/>

$( 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+

• http://api.jquery.com/on/
• http://api.jquery.com/delegate/
• http://api.jquery.com/live/

<小时/>

Example