【发布时间】：2015-04-14 18:33:27
【问题描述】：
这是一篇完全更新的帖子，旨在通过改进的代码概念更好地解释问题（基于到目前为止此处给出的答案）
我尝试实现一个完全 ajaxed 的网站。但是我遇到了多个绑定事件的问题。
这是基本的 HTML：
<header id="navigation">
<ul>
<li class="red" data-type="cars">Get Cars</li>
<li class="red" data-type="vegetables">Get Vegetables</li>
</ul>
</header>
<div id="anything">
<section id="dymanic-content"></section>
</div>
导航是动态创建的（#navigation 的内容可以替换为另一个导航），因此导航元素的绑定如下所示：
$('#navigation').off('click', '.red').on('click', '.red', function() {
var type = $(this).attr('data-type');
var data = { 'param': 'content', 'type': type };
ajaxSend(data);
});
网站的内容也在动态加载。比如有两种不同的内容：
1：
<div id="vegetables">Here are some informations about vegetables: <button>Anything</button></div>
2：
<div id="cars"><img src="car.jpg"></div>
在加载内容的同时，我还将加载一个特定的 JS 文件，该文件包含此类内容所需的所有绑定。所以加载脚本看起来像这样：
var ajaxSend = function(data) {
$.ajax({ url: "script.php", type: "POST", data: data, dataType: "json" })
.done(function( json ) {
if (json.logged === false) { login(ajaxSend, data); }
else {
$.getScript( 'js/' + json.file + '.js' )
.done(function( script, textStatus ) {
$('#result').html(json.antwort);
});
}
});
}
当您传递所需结果类型（即蔬菜或汽车）的参数时，结果将显示在#result 中。还会加载文件cars.js 或vegets.js。
所以我的问题是避免多个事件绑定。我就是这样做的：
cars.js：
$('#result').off('mouseover', 'img').on('mouseover', 'img', function () {
// do anything
});
vegetables.js：
$('#result').off('click', 'button').on('click', 'button', function () {
// do anything
});
这是正确的方法吗？我认为使用off() 只是一种解决方法。因此，如果有任何改进，我将不胜感激！
此外，如果用户多次单击导航，我不知道是否有问题：在这种情况下，js文件会被多次加载，不是吗？那么这个概念是否有多个绑定？
【问题讨论】：
-
您可以拥有每个动态内容的特定JS文件，该文件将加载动态内容。
-
你能给出一个代码示例吗？我想用不同的 JS 文件来做到这一点。但问题是一样的，不是吗？我必须使用委托事件，对吗？加载新内容时是否必须卸载 JS 文件？
-
对原始代码进行了所有更改，这应该是一个新问题......
-
同一个话题，同一个问题。我刚刚更新它以使其更清晰。我不认为每件事都应该总是有一个新问题......
标签： javascript jquery ajax events javascript-events