Reputation: 2102
I have a carousel menu, see the screenshot below:
When I click on "Macchine" the <div>
containing a big image appears (in the example the big green image with the number 1). Besides a table with thumbnails is generated automatically below in another <div>
through JQuery. I would like that when I click on a thumbnail, a bigger version of the same image appears in the carousel menu.
This is the part of the carousel menu:
<div class="container">
<div id="demo">
<ol>
..........
<li id="macchine">
<h2><span>Macchine</span></h2>
<div class="slideshow" id="kenburns"><img id="img-macchine" alt="1"
src="1.gif"></div>
<p class="ap-caption">Macchine</p>
</li>
.......
</ol>
</div>
</div>
This is the JQuery code I used for changing the image in the carousel menu when clicking on a thumbnail (with id=img1):
<script>
$(document).ready(function() { // when the document is loaded
var img;
$('#img1').click(function() {
img = 'produzione1.gif';
$('#macchine img').attr("src", img);
return false;
});
});
</script>
I also tried using '$('#img-macchine').attr("src", img);
(They should be equivalent for identifying the image).
I stored the source path of the image that has to be loaded, in the img
variable, then I use the attr()
method in jquery but when I click on the thumbnail the image in the carousel doesn't change. (I used a completely different image so that the change would be easier to notice). Nothing happens apparently. Am i doing anything wrong? Can you help me to solve the problem? (Of course the path of the image that has to be loaded is correct).
Upvotes: 0
Views: 1508
Reputation: 74410
For dynamic generated elements, you need to delegate event. For example:
$(document).on('click','#img1', function(){
img = 'produzione1.gif';
$('#macchine img').attr("src", img);
});
Now instead of using document, you should delegate to closest static container, maybe:
$(document).ready(function () { // when the document is loaded
var img;
$('.container').on('click', '#img1', function () {
img = 'produzione1.gif';
$('#macchine img').attr("src", img);
return false;
});
});
Upvotes: 1