Мой код Jquery работает только один раз?

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, О, контакты, ...), что, когда пользователь нажал на нее, с Jquery нагрузки содержимое внешнего файла (домой. 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 из-за их производительности и удобства недостатков, и больше не поддерживается.

Решение: Перезапишите вызовы в .live(), используя .on() или .delegate(). Инструкции для этого приведены в документации API .live().

поэтому используйте вместо этого:

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