Question

我正在使用JQuery UI标签通过Ajax加载内容。我有两个选项卡应该加载html内容并执行脚本来隐藏或显示加载内容中的一些元素。我遇到了一个问题，即当单击第二个选项卡时，Ajaxified内容返回的脚本没有执行。单击第一个选项卡时正在执行脚本。

我在这里有代码片段来重现问题。这可以解决吗？

以下是HTML页面的标签列表

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>tabs demo</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="tabContent.html"><span>One</span></a></li>
        <li><a href="tabContent.html"><span>Two</span></a></li>
    </ul>
</div>
<script>
$("#tabs").tabs();
</script>

</body>
</html>

标签内容html文件tabContent.html

<script>
$(document).ready(function () {
    $("#HideShowMe").attr("disabled", true);
    $("#HideShowMe").hide();

    $('#Cancel').click(function () {
        $('#HideShowMe').attr('disabled', true);
        $('#HideShowMe').hide();
    });

    $('#Show').click(function () {
        $('#HideShowMe').attr('disabled', false);
        $('#HideShowMe').show();
    });

});
</script>

<h2>Ajxified Content</h2>
<div id="ActionHideShow">
<input type="button" id="Cancel" name="command" value="Cancel" />
<input type="button" id="Show" name="Show" value="Show" />
</div>

<div id="HideShowMe">
<p>Hello there I should hide at any cost</p>
</div>

Answer 1

您遇到了重复ID的情况！ ID属性在任何给定文档中都应该是唯一的。

来自Answer from JQuery UI forum

Ajax选项卡不执行脚本

1 个答案: