JQuery UI选项卡中的JQuery UI按钮不'；来回切换后无法工作

初学者。我有一些选项卡，每个选项卡的内容都是从文本文件中动态加载的。因此，单击每个选项卡，就会为该选项卡加载包含内容的文本文件

$('#thisMainTabs').tabs({selected:0});

<div id='thisMainTabs'>
<ul>
<li><a href='/scripts/thisMainTabs1.txt'>Tab 1 Content</a></li>
<li><a href='/scripts/thisMainTabs2.txt'>Tab 2 Content</a></li>
<li><a href='/scripts/thisMainTabs3.txt'>Tab 3 Content</a></li>
<li><a href='/scripts/thisMainTabs4.txt'>Tab 4 Content</a></li>
<li><a href='/scripts/thisMainTabs5.txt'>Tab 5 Content</a></li>
</ul>
</div>

---

基本上，每一个例子都是如此……我想这是相当基本的

我想我现在更了解你的问题了

您有一个

div

，每个选项卡中都有一个

id=“btnNumber1”

。但是这些选项卡都存在于同一个窗口（或者更准确地说，框架）中，并且html

id

s在给定文档中必须是唯一的

因此，您需要在第二个选项卡中提供按钮id=

btnNumber2

，在第三个选项卡中提供按钮id=

btnNumber3

，等等。它只在第一个选项卡上起作用的原因是您的所有代码都在查找DOM中存在的第一个

编辑：

Justin，如果您在父文档中执行委托绑定怎么办？例如：

$('#thisMainTabs').on('click', '#btnNumber1', function() { alert('Button 1 clicked'); });

---

那么这是不是100%的时间都在开火？我不是说这就是解决办法。。。我认为你把相关代码和内容保持在一起是件好事。。。否则，这将成为维护的噩梦，但我感觉在按需加载的情况下发生了一些事情……可能是

.ready（）

在第一次加载选项卡后没有触发？不知道，在做摇篮；）

我有一个答案，但被删除了，因为我想我误解了你的问题…你是否试图在每个选项卡的内容中添加

addnew

？您在父文件的第二个代码块中拥有的javascript是否包含/thisMainTabs？还是内容文件？@BLSully…谢谢你的回复。我明白你的意思，我可以在问题中再澄清一点。实际上，每个按钮、对话框等的ID都是唯一的。@Justin：那么我有点困惑了。在我看来，你的每个“内容文件”中都有一个

$（document）.ready（）

？我通常不会像那样从URL加载选项卡内容（我个人的方法是在每个选项卡中都有框架代码，然后在激活单个选项卡时通过AJAX调用填充表/列表等），但我首先要问的是，是否所有的“文档准备”都在启动。放置一个

console.log（'ready fired'）

，查看是否每次加载一个选项卡时都会收到一个？是，我添加的警报会触发…对话框不会打开。因此，也许这是对话的一个问题。现在我也真的很困惑。把你的答案记下来，因为它把我带到了问题的地方。我确实发现了一个标签的重复id，它将div包装在一个类似桌子的面板中。天哪，这一切都是为了一个dup ID！？！？！我非常感谢你的帮助！另外，我要说的是，在纠正了这个问题之后，我这样做的效果非常好，并且可以快速地将数据带回，但我确信还有更复杂的方法，比如骨架思想……这就是我学习和仍然学习的方式。如果有学习更好方法的资源，我也会很感激！再次感谢！是的，老兄……我不是以消极的方式说的。我只是想，如果这种方法现在对我来说很好，那可能是因为我还没有深入到足以知道它以后会引起问题的程度，如果你知道了，我很感激你的知识。就这些。别紧张。不，说真的，我真的很感谢你的帮助！

$('#thisDialogDiv').dialog({ 
                        resizable:false, 
                        width:200, 
                        modal: true, 
                        autoOpen: false, 
                        buttons: { 
                        "Ok": function() { $(this).dialog("close"); } } 
                        }); //not bothering with buttons

<div id="thisDialogDiv">
<h3>Here is the Title</h3>
<p>Here is some content on the dialog</p>
</div>

$('#btnNumber1').click(function () {
    $('#thisDialogDiv').dialog("open");
});

$('#thisMainTabs').on('click', '#btnNumber1', function() { alert('Button 1 clicked'); });