Question

这是我的HTML代码：

<a href="#" class="menu_item"><img src="Home-48.png" alt="education" /></a>
<br /><br />
<a href="#" class="menu_item"><img src="Shield_48.png" alt="education" /></a>
<br /><br />
<a href="#" class="menu_item"><img src="Education-48.png" alt="education" /></a>
<br /><br />
<a href="#" class="menu_item"><img src="Money-Bag-48.png" alt="education" /></a>

这是我的Jquery代码：

$(document).ready(function(){
    $('.menu_item1').click(function (){
        $('#custom_menu_loading_section').fadeIn(800, function (){
            $('#custom_menu').load('education.html', {}, function () { $( "#accordion" ).accordion({ heightStyle: "fill" }); });
        });
    });
});

我希望当我点击图片时，education.html加载到$("#custom_menu")，但它只能运行一次，例如当我点击第一张图片时它正常工作但之后我点击第二张图片它不起作用！？为什么呢？

我的目标：我希望有一个菜单项（用于exapmle Home，About，contact，...）当用户点击它时，jquery将外部文件的内容（home.html，about.html，...）加载到“#custom_menu”显示加载效果的“#custom_menu_loading_section”。

Answer 1

尝试Live而不是点击。

来自文档：

为现在和将来与当前选择器匹配的所有元素附加事件处理程序。

Answer 2

来自jQuery团队的

注意事项：

不推荐使用jQuery.fn.live（）;不推荐使用jQuery.fn.die（）

原因：由于性能和可用性方面的缺陷，.live（）和.die（）方法在1.7中已弃用，不再受支持。

解决方案：使用.on（）或.delegate（）重写对.live（）的调用。有关这样做的说明，请参阅.live（）API文档。

所以请改用：

$(document).ready(function () {
     $(document).on('click', '.menu_item1', function () {
          // do something
     });
});

我的Jquery代码只工作一次？

2 个答案: