load ne fonctionne qu'une fois

Version imprimable

bonjour j'arrive à ouvrir une colorbox avec la fonction load mais le clic ne fonctionne qu'une fois

quand je ferme ma colorbox et que je souhaite l'ouvrir à nouveau le lien ne fonctionne plus

voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<a href="page1.html" id="ext" class="ext">Mon portfolio</a>
<script>
 
$(document).ready(function() {
  $("body").on('click', '.ext',function(event) {
  event.preventDefault();
    var url = $(this).prop('href');
	$('body').append('<div id="ajax-load-element-wrapper" style="display:none;"><div id="hopla"></div></div>');
 
	$('#hopla').load(url, function() {
        $.colorbox({
            href: '#hopla',
            width: 960,
            height: 400,
            inline: true,
            opacity: .7
        });
    });
 
 
  });
});
 
 
 
</script>

27/12/2017, 13h57
mathieu

à chaque clic, vous ajoutez un élément avec l'identifiant "hopla" ce qui ne va pas puisque les identifiants doivent être uniques sur une page.
essayer peut être de tester si cet élément existe déjà avant de l'ajouter.

si je teste avec ce code ça fonctionne sans soucis
Code:

1 2 3 4 5 6 7 8 9 10 $(document).ready(function() { $("body").on('click', '.ext',function(event) { event.preventDefault(); var url = $(this).attr('href'); $('body').append('<div id="hopla"></div>'); $("#hopla").load(url); }); });
j'ai essayé avec 2 colorbox et une fois que je clique sur la 1ere impossible d'afficher la seconde qui ne porte pourtant pas le même id

par contre j'ai trouvé ceci:

This will automatically separate the element within the URL, as required by the $.load() function.
This means that you can maintain graceful degradation by using URLs like this in your tags:
/test.html#div
Since the JS will automatically add a space before the #div, as required by $.load().