jquery-ui，已添加选项卡，无法通过新选项卡上的文本链接切换至旧选项卡

Question

I have spent many hours researching this problem to no avail. I have a simple page with 3 tabs. Tab #1 has a button to add a new tab (tab #4). Tab #2 has a hyperlink to switch to tab #3 which works fine (also get console message). After adding tab #4 (index=3), via button, which includes a hyperlink to switch to tab #3, the hyperlink on tab #4 is not functional nor is there a console message.

 function addTab4() { $("#btnAdd").attr("disabled","disabled").text("tab 4 added"); $("#tabs").find(".ui-tabs-nav").append('<li><a href="#tabs_4">4</a></li>'); $("#tabs").append("<div id='tabs_4'></div>"); $("#tabs_4").html("<a id='selectTab3' href='#tabs_3'>goto tab 3</a>"); // doesn't switch to tab 3 $("#tabs").tabs("enable"); $("#tabs").tabs("refresh"); return false; }; $(document).ready(function(){ $("#tabs").tabs(); $("#tabs").tabs("option", "active", 0); $("a#selectTab3").click(function() {//works from an original tab, not added tab console.log("a#selectTab3 clicked"); $("#tabs").tabs("option", "active", 2); }); $("#btnAdd").click(function() { addTab4(); }); }); 

 <div id="tabs"> <ul> <li><a href="#tabs_1">1</a></li> <li><a href="#tabs_2">2</a></li> <li><a href="#tabs_3">3</a></li> </ul> <div id="tabs_1"> One<br> <button id="btnAdd">Add Tab 4</button> </div> <div id="tabs_2"> Two<br> <a id="selectTab3" href="#tabs_3">goto tab 3</a> <!-- works --> </div> <div id="tabs_3"> Three </div> </div> 

Thanks in advance!

Answer 1

The problem with your code is that you have dynamically generated the anchor element. So, the click event you have designated for the anchor will not work for the newly created event. To tackle that you need to Understand & Use Event Delegation . So instead of the previous event handler use this instead and you will be fine,

 $(document).on("click","a.selectTab3",function() {
        console.log("a#selectTab3 clicked");
        $("#tabs").tabs("option", "active", 2);
    });

And here is the working fiddle

PS

You are attempting to use multiple id with the same name which is a very bad practice as id must be unique in the DOM. So, I have changed it to instead use class .