Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

提前致谢！

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，添加了标签，无法通过新标签上的文本链接切换到旧标签

1 个答案:

这是working fiddle