Question

我正在使用jQuery和Ajax。

home.html的

<html>
<head>
    <script src="jquery.js"></script>
    <script src="javascript.js"></script>
</head>
<body>
    <div id="div1"></div>
    <button>click</button>
</body>
</html>

javascript.js

$(document).ready(function(){
    $('button').click(function(){
        alert('Button is clicked');
        $("#div1").load("test2.html");
    });

    $("#b2").click(function(){
        $("#div2").hide();
    });
});

TEST2.html

<body>
    <div id="div2">
        some content
        <input type="button" id="b2" value="hide" />
    </div>
</body>
<head><script src="javascript.js"></script></head>

当我点击按钮时，Ajax会在div中加载内容。但是，当我再次点击按钮时，它会被点击两次。我知道为什么这次点击两次，因为我再次加载 javascript.js 文件。

如果我不能这样做，那么隐藏按钮不起作用，因为JavaScript在div2之前加载，这就是隐藏按钮不起作用的原因。

解决方案：

有一个解决方案是我使用test2.html中的隐藏按钮代码而不是javascript.js但我不想这样做。因为这是我原始代码中的一个演示，所以很难做到这一点。还有另一个解决方案吗？

Answer 1

反复重新加载JavaScript是一个坏主意。

如果您只想处理动态添加的按钮的点击，您可以使用事件委派来执行此操作。完全从javascript.js移除test2.html，并像这样连接处理程序（例如，将javascript.js更改为以下内容）：

$(document).on("click", "button", function(){
    alert('Button is clicked');
    $("#div1").load("test2.html");
});
$(document).on("click", "#b2", function(){
    $("#div2").hide();
});

监视文档上的click事件，但是如果事件通过冒泡阶段中与第二个参数中的选择器匹配的元素传递，则仅触发关联的处理程序。在触发处理程序时，jQuery使它看起来很像处理程序实际附加到该元素，而不是document。

test2.html中的内容远比应有的多得多。 jQuery只会在body中添加该位（并运行脚本，但我们正在删除它）。 test2.html应该是：

<div id="div2">
 some content
<input type="button" id="b2" value="hide" />
</div>

附注：如果您要在下次点击时更换它，我会使用$("#div1").empty()而非$("#div2").hide()，以便您实际主动删除您之后要替换的内容，而不仅仅是隐藏它。

加载ajax后加载javascript文件

1 个答案: