JQuery UI 按钮，在 jQuery UI 选项卡内来回切换后不起作用

Question

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

$('#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>

我想是最基本的。在其中一些选项卡中，我有 jQuery 按钮，它们也是非常基本的

在文件内准备好：

$('#btnNumber1').button({icons: {primary: 'ui-icon-circle-plus' secondardy: null} });

$('#btnNumber1').click(function () {
     alert('working');
});


<div id='btnNumber1'>add new<div>

作为一个例子，我只是使用了这些警报，但实际上这些东西打开了对话框（是的 jquery 对话框也是如此）。似乎正在发生的事情是，第一次选择的每个选项卡都会呈现按钮并且它会工作，但是如果我返回选项卡，按钮就在那里，但单击时不执行任何操作。不确定是对话框还是按钮？但一切都是第一次通过。

我是新手，非常感谢您对此提供的任何帮助。谢谢！

编辑：应该再澄清一些事情。道歉。

所以上面的 .tabs() 和 #thisMainTabs 是主页面内容中唯一的东西。除了默认的选项卡内容......真的只有文字。在其他每个选项卡中（大约还有 5 个）我有指向文本文件链接的 href。这些文本文件中的每一个都包含该选项卡内容（标记、js、css 等），并且在每个文件中我都有一个 $(document).ready.... 这有点奇怪，但其他一切似乎去工作？？我将再次声称初学者:)。所以我有手风琴，我有按钮，我有对话框（所有 jQ），一切正常，直到我注意到上述行为。如果我第一次选择每个选项卡，内容就会加载，按钮就在那里，我点击它，它就可以工作（大多数是对话框）。在选项卡之间切换，只要该选项卡第一次被点击，它们都可以工作。

但是，如果我回到一个标签，按钮就在那里，但什么也不做。

我上面的例子是我如何使用所有将它们视为按钮的按钮并设置点击功能的示例。这些中的每一个都在文档中为每个选项卡的每个文本文件准备好。我对所有 ID 进行了两次和三次检查，以确保一切都是独一无二的；使用 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");
});

这基本上是每个实例的内容......我猜很基本。

Answer 1

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

您在每个标签中都有一个div 和一个id="btnNumber1"。但是这些选项卡都存在于同一个窗口（或更准确地说是框架）中，并且 html ids 在给定文档中必须是唯一的。

因此，您需要在第二个选项卡中提供按钮 id = btnNumber2，在第三个选项卡中提供 btnNumber3，等等。它仅适用于您的第一个选项卡的原因是您的所有代码都是找到第一个存在的代码在 DOM 中。

编辑：

贾斯汀，如果您在父文档中进行委托绑定会怎样？例如：

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

那么这会 100% 触发吗？我并不是说这是解决方案...我认为您将相关代码与内容保持在一起很好...否则它会成为维护的噩梦，但我觉得有一些事情正在按需进行loading....也许.ready() 在标签第一次加载后没有触发？不知道，制作 WAG ;)