jquery-ui，已添加标签，无法通过新标签上的文本 link 切换到旧标签

Question

我花了很多时间研究这个问题，但无济于事。我有一个包含 3 个选项卡的简单页面。选项卡 #1 有一个添加新选项卡的按钮（选项卡 #4）。选项卡 #2 有一个超链接可以切换到选项卡 #3，它工作正常（也获得控制台消息）。添加选项卡#4（索引=3）后，通过按钮，其中包括一个超链接以切换到选项卡#3，选项卡#4 上的超链接不起作用，也没有控制台消息。

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>

提前致谢！

Answer 1

您的代码存在的问题是您动态生成了定位元素。因此，您为主播指定的 click 事件将不适用于新创建的事件。要解决这个问题，您需要 Understand & Use Event Delegation。因此，不要使用以前的事件处理程序，而是使用它，你会没事的，

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

这里是 working fiddle

P.S

您正试图使用同名的多个 ID，这是非常糟糕的做法，因为 id 在 DOM 中必须是唯一的。所以，我将其更改为使用 class.

jquery-ui，已添加标签，无法通过新标签上的文本 link 切换到旧标签

jquery-ui, added tab, cannot switch to older tab via text link on new tab

jquery

tabs

jquery-ui

这里是 working fiddle