I have some tabs created with jquery and i want to add new tabs. The method I am using is giving a class "extend" to the anchors which I want to create a new tab and removing their default functionality. Then I load the content into the newly created div. The problem is that the class "extend" anchors in the ajax loaded content don't inherit this particular behavior. Any help is appreciated.Thank you. Code:
$(function(){
$("#tabs").tabs();
$("a.extend").click(function(event) {
event.preventDefault();
var $name=$(this).attr("name");
var $link=$(this).attr("href");
$("#tabs").tabs("add", "#"+$name,$(this).attr("name"));
$("#"+$name).load($link);
//$(".extend").click(function(event){ event.preventDefault();}); this didn't fix it
});
});
Simplest thing to do is use jQuery's ".delegate()" to handle the "click" events:
$('body').delegate('a.extend', 'click', function(event) {
// your code here, as in your question
});
That puts an event handler on the <body> tag that waits for "click" events to bubble up, and then for those whose actual target element is an <a> with class "extend", it dispatches to the handler. That will work for <a> elements there originally as well as those added later.
You don't have to put the handler on the <body> tag; you could put it at any convenient parent element containing the anchors.
The ".delegate()" function is like the ".live()" function, but personally I like it better because it's more flexible, more "jQuery-like", and a little more efficient.