Question

我正在处理这个问题。我在我的页面上运行一些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次，而不是只有一次。

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

任何人都可以提供有效的解决方案吗？谢谢，迈克。

Answer 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);
    });
});

Answer 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);
        });
    });
});

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

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

2 个答案: