#{...} not allowed in a template text body.

#{...} not allowed in a template text body.

Hi, I am very much new to jQuery. I am trying to add new tab. I have created a tab template:

var $tabs-task1 = $('#tabs).tabs({ tabTemplate: '<li><a href="#{href}">#{label}</a></li>', add: function(event, ui) {
var tab_content = 'Added dynamically.';
$(ui.panel).append('<p>'+tab_content+'</p>');
}});


then on a button click I am calling the following js function:
function addTab() {
      $tabs-task1.tabs('add', 'new Tab', 'New Tab');
   }


on running, I am getting the following error:

#{...} not allowed in a template text body. at
var $tabs-task1 = $('#tabs).tabs({ tabTemplate: '<li><a href ="#{href}">#{label}</a></li>', add: function(event, ui) {var tab_content = 'Added dynamically.';
$(ui.panel).append('<p>'+tab_content+'</p>');
}});

the place holders are not replaced. Could anyone pls put me into right direction?