加载ajax后加载javascript文件

Question

I am using jQuery and Ajax. 我正在使用jQuery和Ajax。

HOME.html 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 javascript.js

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

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

TEST2.html TEST2.html

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

When I click on button, Ajax loads the content in div. 当我单击按钮时，Ajax将内容加载到div中。 But when I again click on button then it is clicked twice. 但是，当我再次单击按钮时，它被单击了两次。 I know why this click twice happens, because I again load the javascript.js file. 我知道为什么两次单击都会发生，因为我再次加载了javascript.js文件。

If I can't do that then the hide button is not working because the JavaScript loads before the div2 , that's why hide button is not working. 如果我不能这样做，那么隐藏按钮不起作用，因为JavaScript在div2之前加载，这就是为什么隐藏按钮不起作用的原因。

SOLUTION: 解：

There is one solution is that I use the hide button code in test2.html instead of in javascript.js But I don't want to do that. 有一种解决方案是，我在test2.html而不是在javascript.js使用隐藏按钮代码，但我不想这样做。 Beacuse this is a demo in my original code this is very difficult to do that. 因为这是我原始代码中的一个演示，所以很难做到这一点。 Is there another solution to this? 还有其他解决方案吗？

Answer 1

Repeatedly re-loading the JavaScript is a bad idea. 反复重新加载JavaScript是一个坏主意。

If you just want to handle clicks on buttons that are dynamically added, you can do that using event delegation. 如果您只想处理动态添加的按钮的单击，则可以使用事件委托来完成。 Remove javascript.js from test2.html entirely, and hook up your handlers like this (eg, change javascript.js to the following): 从test2.html完全删除javascript.js ，并像这样连接您的处理程序（例如，将javascript.js更改为以下内容）：

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

That watches for the click event on the document, but only fires the associated handler if the event passed through an element in the bubbling phase that matches the selector in the second argument. 这会监视文档上的click事件，但仅在事件通过冒泡阶段中与第二个参数中的选择器匹配的元素时才触发关联的处理程序。 When firing the handler, jQuery makes it look a lot like you had the handler actually attached to that element, rather than to document . 触发处理程序时，jQuery使它看起来很像将处理程序实际附加到该元素，而不是附加到document 。

There's a lot more in test2.html than there should be. test2.html远远超出了应有的范围。 jQuery will only append the bit in the body (and run the script, but we're removing that). jQuery只会在body附加该位（并运行脚本，但我们将其删除）。 test2.html should just be: test2.html应该只是：

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

Side note: If you're going to replace it on the next click, I'd use $("#div1").empty() rather than $("#div2").hide() so that you actually proactively remove the content you're going to replace later, rather than just hiding it. 旁注：如果要在下次单击时替换它，我将使用$("#div1").empty()而不是$("#div2").hide()以便实际上主动删除您稍后将要替换的内容，而不仅仅是隐藏它。

加载ajax后加载javascript文件

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-06-01 07:54:12

加载ajax后加载javascript文件

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-06-01 07:54:12

解决方案1
0 已采纳 2014-06-01 07:54:12