Jquery Tab添加删除

Question

Tab 1 does not work. Tab 1 is drawn from MySQL table. I want show default tab and add or delete an extra tab and post mysql get inserted tab id append not count?. Can you help?

Visit jsfiddle jsfiddle.net/datakolay/33aM3/

Html

 <ul id="tabul">
  <li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
   <li id="t21" class="ntabs"> Tab Mysql id 21
    <a href="" id="close21" class="close">&times;</a>
  </li>
   <li id="t22" class="ntabs"> Tab Mysql id 22
    <a href="" id="close22" class="close">&times;</a>
   </li>  
</ul>
<div id="tabcontent">
  <p id="c21">Test</p>    
  <p id="c22">Test</p> 
</div>

Javascript

$(function() {
var total_tabs = 0;
total_tabs++;
$("#addtab, #litab").click(function() {
    total_tabs++;
    $("#tabcontent p").hide();
    addtab(total_tabs);
    return false;
});
function addtab(count) {
    var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
    $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab Extra &nbsp;&nbsp;'+closetab+'</li>');
    $("#tabcontent").append('<p id="c'+count+'">Tab Content </p>');

    $("#tabul li").removeClass("ctab");
    $("#t"+count).addClass("ctab");

    $("#t"+count).bind("click", function() {
        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");
        $("#tabcontent p").hide();
        $("#c"+count).fadeIn('slow');
    });

    $("#close"+count).bind("click", function() {
        // activate the previous tab
        $("#tabul li").removeClass("ctab");
        $("#tabcontent p").hide();
        $(this).parent().prev().addClass("ctab");
        $("#c"+count).prev().fadeIn('slow');

        $(this).parent().remove();
        $("#c"+count).remove();
        return false;
    });
}
});

MY NEW EDİT Visit jsfiddle jsfiddle.net/datakolay/33aM3/8/

 $(function() {  
 $('#tabcontent p').hide().filter(':lt(1)').show();
    $("#tabul li").removeClass("ctab");
    $(".ntabs").filter(':lt(1)').addClass("ctab");

    $("#addtab").click(function() {
     $("#tabcontent p").hide();
      var dataString = '';
             $.ajax({
              type: "POST",
              url: "add_tab.php",
              data: dataString,
              cache: false,
              success: function(html)
                 {
                  $("#tabul li").removeClass("ctab");
                  $("#t"+count).addClass("ctab");
                  $("#tabcontent p").hide();
                  $("#c"+count).fadeIn('slow');
                 }
              });              
          return false;
    });


    $(".ntabs").bind("click", function() {
      var id = $(this).attr('id')
      $("#tabul li").removeClass("ctab");
      $(".ntabs").addClass("ctab");

        $("#tabul li").removeClass("ctab");
        $("#"+id).addClass("ctab");
        $("#tabcontent p").hide();
        $("#c"+id).fadeIn('fast'); 
    });

    $(".close").bind("click", function() {
        var id = $(this).attr('id')
        $("#tabul li").removeClass("ctab");
        $("#tabcontent p").hide();
        $(this).parent().prev().addClass("ctab");
        $("#c"+id).prev().fadeIn('fast');
        $(this).parent().remove();
        $("#c"+id).remove();
        return false;
    });

Answer 1

You're only adding the event listener to dynamically added tabs i.e.; tab 2, tab 3, tab 4... since tab 1 is hardcoded into the html opposed to being dynamically loaded in, it's never getting the listener added. Although there are a ton of optimizations I'd add to this, the quick fix is to add.

 $("#t1").bind("click", function() {
      $("#tabul li").removeClass("ctab");
      $("#t1").addClass("ctab");
      $("#tabcontent p").hide();
      $("#c1").fadeIn('slow');
 });