click ID problem

**jemz** · Feb 10, 2013 05:17

Hi, I am getting trouble with this,my problem is that I have a div as a container,and a tabs compose of two li's ,every time i click Tab A the data will be request to the server via jQuery.ajax and then the requested data will be loaded to the container div,and if i click the Tab B the data also will be requested to the server via jQuery.Ajax and will be loaded to the container div...each Tab A and Tab B has dialog box if ever i click the edit button and then i already clicked the Tab B,the dialog of the Tab B will show as animated. And if i click to Tab A and then click again the edit button the dialog box of Tab A will show as animated.but my problem is that the two dialog will show every time i click the button edit.but i already changing the id of my edit button everytime i click each of this Tab.

Code:

$(function () {

    $('#TabA').click(function () {

	$('#Bedit').attr('id','edit'); changing the id of the edit button

        $.ajax({
            type:"POST",
            url:"to other page.php",
            data:some parameter here //
            success:function (item) {
              //data loaded to the container div here.                 

                });
            }

        });


    });

});

Code:

   $('#TabB').click(function () {

	$('#edit').attr('id','Bedit'); changing the id of the edit button

        $.ajax({
            type:"POST",
            url:"to other page.php",
            data:some parameter here //
            success:function (item) {
              //data loaded to the container div here.                 

                });
            }

        });


    });

});

HTML Code:

 <div  id="tabA" ></div>
 <div  id="tabAbox" >
    <div class="outerlabel">
        <label>Edit tab A</label>
    </div>

 </div>

HTML Code:

  <div  id="tabB" ></div>
 <div  id="tabBbox" >
     <div class="outerlabel">
        <label>Edit tab B</label>
    </div>

 </div>

Code:

$(function(){
     $('#Bedit').click(function(e){
          e.preventDefault();
          $('#tabB').fadeIn(200);
          $('#tabBbox').animate({
              top:'5px',
              left:'250px'
          }, 500);

      });

});

Code:

$(function(){
     $('#edit').click(function(e){
          e.preventDefault();
          $('#tabA').fadeIn(200);
          $('#tabAbox').animate({
              top:'5px',
              left:'250px'
          }, 500);

      });

});

**jemz** · Feb 10, 2013 07:46

I forgot to post the image button

HTML Code:

<div >

<a href="#" id="edit"><img src="img/edit.png"/></a>

</div>

I found out that after clicking the TabB when i inspect to the firebug console tab the id="edit" change to id="Bedit" but when i look in the script tab of firebug the id="edit" still remains,
i think this is the reason why the two of the dialog box will be triggered,is there anyways to solve this problem?

Thank you in advance.