Question

I have butons which are created dynamically, each button has an id set in ‘rel’ attribute. When I click the first button, it display the correct information, when I click the second button it’s already ok, but if i re-click on the first button, it loads the information related to the second button.

if you want too see live : jsfiddle

$('#target').hide()

$('.e-link').bind('click',function(){
    var link = $(this).attr('rel');
    $('#target').hide('fast',loadContent);
    $('#'+link).show('fast',loadContent);

    function loadContent() {
        $('#target').load(showNewContent())
    }

    function showNewContent() {
        $('#target').show('normal',hideLoader());
    }

    function hideLoader() {
        $('#load').fadeOut('normal');
    }

    return false;

---

HTML CODE

   <div id="port">
   <!-- Begin Item  -->
   <div class="e-target" id="target">   
        <div class="e-block" id="block_211">
  <div class="inner">
             t: Xt
             D: XD
             P: XP
</div>
    <div class="e-block" id="block_491">
  <div class="inner">
             t: Yt
             D: YD
             P: YP
  </div> 
 </div>
     <!-- End Item  -->

 <!-- Begin button -->
  <ul class="works" id="case_items">
  <li class="post-211 menu menu"> 
 <a href="#" class="e-link" rel="block_211">  X
    <img width="150" height="150" src="http://xxxx.jpg" class="thumbnail" alt="X"     title="X" />            
  </a> 
  </li>
  <li class="post-491 type-menu "> 
          <a href="#" class="e-link" rel="block_491"> Y 
            <img width="80" height="80" src="http://YYY.png" class="thumbnail" alt="Y" title="Y" /> 
  </a> 
  </li>
  </ul>
   <!-- End button -->

   <div class="clear"></div>
      </div>

Any advice?

Answer 1

I don’t know if this is the extent of your problem, but both of these are wrong:

function loadContent() {
    $('#target').load(showNewContent())
}

function showNewContent() {
    $('#target').show('normal',hideLoader());
}

They should be this:

function loadContent() {
    $('#target').load(showNewContent)
}

function showNewContent() {
    $('#target').show('normal',hideLoader);
}

You want to pass a reference to your functions, not actually execute them and pass the return value.

Without seeing your HTML, it’s a little hard to diagnose further.