Mon code Jquery Fonctionne seulement une fois?

Question

Ceci est mon code 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> 

---

et voici mon code 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" }); }); 
     }); 
    }); 
}); 

je veux que quand je clique sur les images, education.html charge dans le $("#custom_menu"), mais fonctionne seulement une fois, par exemple quand je clique sur la première image cela fonctionne correctement mais après cela quand j'ai cliqué sur les secondes images cela ne fonctionne pas!? Pourquoi?

---

mon objectif: je veux avoir un des éléments de menu (pour exapmle Accueil, À propos, contact, ...) que lorsqu'un utilisateur a cliqué dessus, avec une charge jquery le contenu du fichier externe (la maison. html, about.html, ...) dans le "#custom_menu" avec l'affichage de "#custom_menu_loading_section" pour charger l'effet.

Answer 1

Essayez Live au lieu de cliquer.

De la documentation:

liez un gestionnaire d'événements pour tous les éléments qui correspondent au sélecteur de courant, maintenant et dans l'avenir.

Answer 2

note de l'équipe jQuery:

jQuery.fn.live() est dépréciée; jQuery.fn.die() est dépréciée

Cause: Le .live() et .die() ont été dépréciées à 1,7 en raison de leurs inconvénients de performance et de facilité d'utilisation, et ne sont plus pris en charge.

Solution: Réécrivez les appels à .live() en utilisant .on() ou .delegate(). Les instructions pour le faire sont fournies dans la documentation de l'API .live().

utiliser donc ceci:

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