Question

I have been wrangling with my code all day with no luck in solving the problem.

My website has a series of images acting as navigation:

    <div id="thumbs">
    <a href="#" rel="images/edwards1.jpg" class="image"><img src="images/edwardsthumb1.jpg" class="thumb" border="0"/></a>
    <a href="#" rel="images/sample1.jpg" class="image"><img src="images/sample1thumb.jpg" class="thumb" border="0"/></a>
    </div>

when these are clicked, content is added to blank divs:

<div id="image">  <!-- main image container -->
</div>

<div id="gallerytext"> <!-- text box -->    
</div>

<div id="thumbset"> <!-- series of sub images/navigation -->
</div>

with this javascript:

        $(function() {
        var text = $('#gallerytext1').html();  <!-- blank divs are filled with content on page load -->
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset1').html();
        $('#thumbset').html(thumbset);  
        $('#image').html('<img src="images/edwards1.jpg" border="0"/>');


  <!-- click handler -->

  $(".image").click(function() {    <!-- image variable is set when an image with class "image" is clicked -->
        var image = $(this).attr("rel"); <!-- each image has appropriate rel attribute to fill variable -->

    if (image == 'images/edwards1.jpg'){   <!-- different text and gallery loaded on click of specific image -->
        var text = $('#gallerytext1').html();
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset1').html();
        $('#thumbset').html(thumbset);
        $('#thumbset').hide();
        $('#thumbset').fadeIn('slow');
    }

    if (image == 'images/sample1.jpg'){     <!-- different text and sub-gallery loaded on click of specific image -->
        var text = $('#gallerytext2').html();
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset2').html();
        $('#thumbset').html(thumbset);
        $('#thumbset').hide();
        $('#thumbset').fadeIn('slow');
    }

    $('#image').hide();                 <!--  main image changed -->
    $('#image').fadeIn('slow');
    $('#image').html('<img src="' + image + '"/>');
    return false;

      });
      });

It works fine after the intial load, however if one of the “if” statements is triggered and the content is changed, images with the class .image within the div “thumbset” are now unclickable and the main image no longer changes. Images within the main navigation div: “thumbs” still work fine, and the “if” statements still go off.

all images are tagged and formatted as per the top code box in my post, and I cannot figure out why only images within “thumbset” decide to stop working.
I am very very green to Javascript, so any assistance will be greatly appreciated!

UPDATE: here is my updated code. Much cleaner now but the function is not working at all. I’m thinking the problem may be with the variable setting of “image” variable?

    $(document).ready(function() {
    var $doc = $(document.body);


        var text = $('#gallerytext1').html();  //blank divs are filled with content on page load 
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset1').html();
        $('#thumbset').html(thumbset);  
        $('#image').html('<img src="images/edwards1.jpg" border="0"/>');


    //click handler
       $doc.on("click",".image",function(){

        var image=$(this).attr("rel"); 
        var imid=$(this).attr("data");
        var text=$('#gallerytext'+imid).html();
        var thumbset=('#thumbset'+imid).html();

        $('#debug').html(imid);

        $('#gallerytext').fadeIn('slow');
        $('#gallerytext').html(text);
        $('#thumbset').fadeIn('slow');
        $('#thumbset').html(thumbset);
        $('#image').hide();                 
        $('#image').fadeIn('slow');
        $('#image').html('<img src="' + image + '"/>');
        return false;


      });
  });

Answer 1

use

$(document).ready(function() {
var $doc = $(document.body);
$doc.on("click",".image", function() {//...

then bind all events from the $doc (chain them if different selectors

$doc.on(event,selector,function).on(ev,sel,fn)...

or if multiple events on same selector

$doc.on({
        ev : function(e) {},
        ev2 : function(e) {}
        //... 
        },selector).on()...

to comment out in javascript use, it’ll comment what’s after in same line

//

instead of <!-- which is more meant to comment out html

your code in spaghetti like with many repeated instructions,

take out the common instructions in the if

define a pattern so to avoid using if(stg==’sthg’)

for example you could do

     <a ... data-idtoload="*id*">...

then

    var imid=$(this).data("idtoload");
    var text = $('#gallerytext'+imid).html();  
    $('#gallerytext').html(text);
    var thumbset = $('#thumbset'+imid).html();
    //...

no more if & your code is cut by 66%