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
});