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

时间:2012-08-31 12:47:46

标签: jquery jquery-ui jquery-ui-dialog jquery-ui-tabs

初​​学者。我有一些标签,并为每个标签内容动态加载从文本文件有点事。因此,单击每个选项卡,将为该选项卡加载包含内容的文本文件。

$('#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等),并且在每一个中都有一个$(文档).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");
});

基本上它适用于每个实例....我猜是非常基本的。

1 个答案:

答案 0 :(得分:2)

我想我现在更清楚你的问题。

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

所以你需要在第二个标签中给出按钮id = btnNumber2,在你的第三个标签中给出btnNumber3,等等。它只适用于你的第一个标签的原因是你的所有代码都找到了第一个存在于DOM中。

编辑:

贾斯汀,如果你在父文件中委托绑定怎么办? E.g:

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

这会在100%的时间内消失吗?我并不是说这是解决方案......我认为你保持相关代码与内容很好......否则就会成为维护的噩梦,但我觉得随着时间的推移会发生一些事情loading ....也许.ready()在第一次加载标签后没有触发? Dunno,制作WAG;)