views:

57

answers:

0

I am trying to make this really simple jquery plug in.... the problem is that the tabs I create can not be manipulated by jquery. I am guessing they are not in the DOM. I am new at JQ... please help.


$(function(){ $('#containerTabs').find('a[href^=#]').each(function (i) { if ((i + 1) === 1) { makeTabSelected( $(this) ); } else { $( $(this).attr('href') ).hide(); } }); //end #containerTabs.find

$('#maker').click(function(){
 makeTab( $('#userInput').val() );
 }); //end #maker.click

$('#containerTabs li a:first-child').click( function(){

 makeTabSelected( $(this) )
});// end #containerTabs li a[href^=#].click

$('#containerTabs li a:first-child').click( function(){
 makeTabSelected( $(this) )
});// end #containerTabs li a[href^=#].click

$(".remover").click(function(){
 var selected = $('#containerTabs').find('a.selected');
 var nextElement = $(this).parent().next().children('a:first-child');
 if( nextElement.attr('href') == undefined ) nextElement = $('#containerTabs li:first-child a:first-child');
 if( selected.attr('href') == $(this).prev().attr('href') ){ makeTabSelected( nextElement ); }
 deleteTab(this);
 }); //end .remover.click

//-- start functions function deleteTab(element){ targetDiv = $(element).prev().attr('href'); $(element).parent().remove(); $(targetDiv).remove(); } // end function deleteTab

function makeTabSelected( element ){
 var selected = $('#containerTabs').find('a.selected');
 if (selected.length) { 
  selected.removeClass('selected');
  $( selected.attr('href') ).hide(); 
 }//end if
 if (element.length){ 
  element.addClass('selected');
  $( element.attr('href') ).show();
 }// end if
}// end function makeSelected

function makeTab( element ){
 $('#containerTabs').append( $('<li></li>') ); // appends tab to container
 $('#containerTabs li:last').append( $('<a></a>').attr('href','#'+element).html(element) );
 $('#containerTabs li:last').append( $('<a></a>').html('x').addClass('remover') );
 $('#containerDivs').append( $('<div></div>').attr('id', element).attr('style','background: red').html("Content " + element) );
 alert( $('#containerTabs li:last-child  a:first-child').attr('id') );
 makeTabSelected( $('#containerTabs li:last-child  a:first-child') );
} // end function makeMakeTab

});