jQuery 根据已加载表中的数据使用新数据重新加载表答案

【问题标题】：jQuery reload table with new data based on data within loaded tablejQuery 根据已加载表中的数据使用新数据重新加载表
【发布时间】：2012-12-04 09:13:13
【问题描述】：

我有一个脚本执行 mysql 查询并使用

填充表

  $('#results').html(returnData);

mysql 结果包含应该可以点击并重新加载到同一个表中的数据（替换之前的查询）。

化简归一化，下面的代码行不通：

   <head>
    <script>
    $(document).ready(function() {
        $('.a').click(function() {
            $('#results').html('THIS IS VALUE FROM LINK A <a href="#" class="b">B</a>');
        });

        $('.b').click(function() {
            $('#results').html('THIS IS VALUE FROM LINK B');
        });
    });
    </script>
    </head>
    <body>
    <div id="results">THIS WILL BE REPLACED WITH VALUE FROM LINK A OR B</div><BR>
    <a href="#" class="a">LINK A</a><BR>
    <a href="#" class="b">LINK B</a>

如果我单击 LINK A 或 B，div id="results" 会填充 OK，但是当我将相同的链接放置在单击函数返回的 .html 结果之一中时，该链接不起作用，并且 div id“results”为不会重新加载。

所以我的问题是；为什么那行不通？以及根据您在已从.html() 传递的表格内单击的内容重新加载同一个表格的最佳方法是什么？我不想将点击的值传递到新页面。

更新：这将使用 .on()

<script>
$(document).ready(function(){

$('body').on('click', '.a', function() { 
    $('#results').html('THIS IS VALUE FROM LINK A <a href="#" class="b">B</a>');
});

$('body').on('click', '.b', function() { 
    $('#results').html('THIS IS VALUE FROM LINK B');
});

});
</script>

</head>

<body>
<div id="results">THIS WILL BE REPLACED WITH VALUE FROM LINK A OR B</div><BR>
<a href="#" class="a">LINK A</a><BR>
<a href="#" class="b">LINK B</a>

【问题讨论】：

你试过.on()方法吗？
换句话说，如果您将$('.a').click() 更改为$('.a').on('click', function(){})，事情可能会开始像魔术一样工作...... :-)
我不确定这是否会起作用，如果您使用 .live() 它可能会起作用，但这是不推荐使用的功能。您需要使用类似 $('body').on('click', '#results .a', function(){});
如果您查看我的其他评论，您会发现您使用了错误的语法。您对 .on() 的使用是将侦听器附加到 DOM 中已存在的链接。您需要使用我提供的语法，您附加 .on() 的元素必须是您尝试单击的元素的父元素，因为事件如何在 DOM 树上传播（'body' 是一个常见的捕获所有父元素)

标签： jquery mysql document-ready

【解决方案1】：

详细说明 Abhilash 的评论，点击事件未触发的原因是事件侦听器仅附加到执行 onReady 时 DOM 中当前存在的元素。

.live() 是在旧版本的 jQuery 中引入的——现在不推荐使用 .on()——来解决这个问题。它允许您将事件附加到像 body 这样的静态元素，并且当 click 事件传播到 body 时，它会检查触发事件的原始目标元素与您的 .on() 选择器相匹配，如果它们匹配，则执行处理程序。

【讨论】：

我尝试使用 .on()，但无法让它工作。使用 .live() 就像我想要的那样工作，但是如果不推荐使用 .live() 我如何使用 .on() 获得与使用 .live() 相同的结果？
我看到您尝试简单地即插即用 .live() 和 .on()，但这是行不通的。您需要使用文档中的语法，例如 $('body').on('click', '.a', function() { });
谢谢！它现在起作用了！我会用正确的代码更新我的问题。
附带说明，.live() 基本上完成了我发布的代码所做的事情（传播到正文）。 .on() 的好处以及为什么不推荐使用 .live() 是因为 .on() 允许您指定一个“更接近”目标元素的父元素，这将阻止事件在 DOM 树中进一步冒泡。

【解决方案2】：

试试这个 ::

  $('#results').find('.a').click(function() {
        $('#results').html('THIS IS VALUE FROM LINK A <a href="#" class="b">B</a>');
    });

   $('#results').find('.b').click(function() {
        $('#results').html('THIS IS VALUE FROM LINK B');
    });

【讨论】：

【解决方案3】：

<html>
<script>
$(document).ready(function(){

    $('.a').live("click", function(e) {
        e.preventDefault();
        $('#results').html('THIS IS VALUE FROM LINK A <a href="#" class="b">B</a>');
    });

    $('.b').live("click", function(e) {
        e.preventDefault();
        $('#results').html('THIS IS VALUE FROM LINK B');
});

});
</script>

<div id="results">THIS WILL BE REPLACED WITH VALUE FROM LINK A OR B</div><BR>
<a href="#" class="a">LINK A</a><BR>
<a href="#" class="b">LINK B</a>

使用 live() 将事件绑定在新创建的元素上。

【讨论】：

谢谢！像魅力一样工作，但应该弃用 .live() 以支持 .on()。我尝试了您的代码并将其替换为 .on() 但这不起作用...