jQuery и подсветка синтаксиса не работают на динамически загружаемых вкладках

Моя проблема заключается в том, что я использую вкладки JQuery UI на моем сайте. содержимое вкладок загружается динамически, или вы можете сказать, что когда я нажимаю на вкладки, на панели отображения вкладок отображается другая html-страница.

но настоящая проблема возникает всякий раз, когда я хочу загрузить HTML-страницу, содержащую код Java в тегах, которые я использую подсветку синтаксиса для стилизации синтаксиса.

при отладке в браузере я обычно получаю ошибку как

не могу загрузить XregExp дважды в одном кадре

заранее спасибо.

HTML-страница, где я использую вкладки JQuery для динамической загрузки страниц

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="indexLayout.css" />
<link rel="stylesheet" href="navMenu.css" />
<link rel="stylesheet" href="css/jquery-ui-1.10.3.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="highlighter/shCore.js"></script>
<script src="highlighter/shBrushJava.js"></script>
<link href="highlighter/shCore.css" rel="stylesheet" type="text/css" />
<link href="highlighter/shThemeDefault.css" rel="stylesheet"
    type="text/css" />
<script>
    $(function() {
        $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });

    $("#tabs").tabs({
        load : function(event, ui) {
            $("#tabs").find("a").live('click', function() {
                $(ui.panel).load(this.href);
                return false;
                console.log(this.href);
            });
        },
        select : function(event, ui) {
            $("#tabs").find("a").die('click');
            $("#tabs").find("a").live('click', function() {
                $(ui.panel).load(this.href);
                return false;
            });
        }
    });
</script>
<style>
#tabs {
    width: 100%;
    font: 14px/1.5 Trebuchet MS, sans-serif;
}

.ui-tabs-vertical {
    width: 55em;
}

.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 12em;
    margin-top: 20px;
    background: white;
}

.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
    border-radius: 0px;
}

.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
}

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-right: .1em;
    border-right-width: 1px;
    text-decoration: underline;
    text-shadow: aqua;
}

.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em;
    float: left;
    width: 74%;
    text-align: justify;
}

.ui-widget-content {
    border: 0px;
}

.ui-helper-reset {
    line-height: 1;
}

ul.tabs li.ui-state-active,ul.tabs li.ui-tabs-selected {
    color: red;
}

ul.tabs li.ui-tabs-active a,ul.tabs li.ui-tabs-selected a {
    color: red;
}
</style>
</head>
<body>
    <div id="container">
        <div id="upper-menu"></div>
        <header id="header-wrap">
            <header> </header>
        </header>
        <nav>
            <ul>
                <li><a href="index.jsp"><span>home</span></a></li>
                <li><a href="tutsPage.html"><span>about</span></a></li>
                <li><a href="tutsPage.html"><span>contact</span></a></li>
                <li><a href="tutsPage.html"><span>java</span></a></li>
                <li><a href="tutsPage.html"><span>Database</span></a></li>
                <li><a href="tutsPage.html"><span>C/C++</span></a></li>
                <li><a href="tutsPage.html"><span>Blender</span></a></li>
            </ul>
        </nav>

        <div id="content-container">
            <section>
                <div id="tabs">
                    <ul>
                        <li><h2 style="color: blue; text-align: center;">Topics
                            </h2></li>
                        <li><a href="#tabs-1">Introduction</a></li>
                        <li><a href="webpages/java/testPage1.html">Page 1</a></li>
                        <li><a href="webpages/java/testPage2.html">Page 2</a></li>
                        <li><a href="webpages/java/testPage3.html">multithreading</a></li>
                        <li><a href="webpages/java/testPage4.html">test for code</a></li>
                    </ul>
                    <div id="tabs-1">
                        <h2></h2>
                        <p></p>
                    </div>
                </div>
            </section>
            <aside>
                <div id="inside-aside-content-area">
                    <h1></h1>
                    <p></p>
                </div>
                <div id="inside-aside-content-area">
                    <h1></h1>
                    <p></p>
                </div>


            </aside>
        </div>
        <script type="text/javascript">
            SyntaxHighlighter.all()
        </script>
        <footer id="footer-wrap">
            <center>
                &copy <i>copyright reserved</i> @<b> kailash adhikari</b>
            </center>
            <hr>
            <footer> </footer>

        </footer>
    </div>
</body>
</html>

страница я использую синтаксический хайлайтер, имеющий некоторый код Java:

<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="highlighter/shCore.js"></script>
<script type="text/javascript" src="highlighter/shBrushJava.js"></script>
<link href="highlighter/shCore.css" rel="stylesheet" type="text/css" />
<link href="highlighter/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>
<body>
<pre class="brush: java">

        function foo(){
        }
    </pre>
<script type="text/javascript">
    SyntaxHighlighter.all()
</script>

</body>
</html>
Источник

2 ответа

Решение

Я вижу, что вы используете .live() в коде и since version 1.7 было заменено на .On, и вы используете 1.9.1...

<script src="js/jquery-1.9.1.js"></script>
Источник

Хотя у меня нет никакого опыта с SyntaxHighter Кажется, эта статья может вам помочь: SyntaxHighlighter - вызов SyntaxHighlighter.all() для выделения динамически сгенерированного XML

Решение состоит в том, чтобы использовать highlight() вместо all ()

Источник
Другие вопросы по тегам