如何将已经运行的 jQuery 脚本应用于 Ajax 调用的内容？答案

【问题标题】：How to apply already running jQuery scripts to content called by Ajax?如何将已经运行的 jQuery 脚本应用于 Ajax 调用的内容？
【发布时间】：2011-04-26 16:11:16
【问题描述】：

我正在处理这个问题。我在我的页面上运行了一些 jQuery 脚本，它运行良好。问题来了，当我想将这些脚本应用到由 AJAX 调用的内容时。

我创建了一个代码示例来演示该问题。它由 3 个文件组成 - index.html、target.html 和 main.js

Index.html（只是<body>）

<body>

    <script type='text/javascript' src='main.js'></script>  

    <div id='main'>

        <button>Call Ajax</button>
        <br /><br />
        <a href='index.html?clicked=1'>Some link</a>

    </div>

    <div id='target'></div>

</body>

Target.html

<a href='index.html?clicked=1'>Some link 2</a>

Main.js

$(document).ready(function() {

    $('a').live("click", function() {
        if(!confirm('Are you sure?'))
            return false
    });

    $('button').click(function() {
        $.post('target.html', function(data) {
            $('#target').html(data);
        });
    }); 

});

假设，我希望用户每次点击<a> 标签时都进行确认。我单击#main <div> 内的标签，它工作正常。我单击“调用 ajax”按钮，出现一个链接，单击它并没有显示确认。

所以，我想我应该将<script type='text/javascript' src='main.js'></script> 放在 target.html 文件中。

这很好，当我再次单击第一个链接（在#main div 内）时。比确认显示 2 次，而不是只有 1 次。

我在网上发现，有些人使用.live() 或$(document).ajaxComplete(function(){ 方法处理这个问题，但我无法让它运行。

谁能提供一个可行的解决方案？谢谢，迈克。

【问题讨论】：

标签： jquery ajax refresh

【解决方案1】：

不能让它运行是一个糟糕的借口。你当然可以让它运行，而且应该运行，因为这是正确的方法。

试试这个：

var confirmFn = function() {
        if(!confirm('Are you sure?'))
            return false
}

$('a').click(confirmFn);
$('#target').delegate("a", "click", confirmFn);
$('button').click(function() {
    $.post('target.html', function(data) {
        $('#target').html(data);
    });
});

【讨论】：

【解决方案2】：

您是否尝试过在加载额外文件时重新绑定您的点击处理程序？

var f;

$(document).ready(function() {
    $('a').live("click", f=function() {
        if(!confirm("Are you sure?")) return false;
    });

    $('button').click(function() {
        $.post('target.html', function(data) {
            $('#target').html(data);
            $('a').unbind("click").live("click", f);
        });
    });
});

同样，我会检查控制台是否有错误。

【讨论】：