如何使用ajax加载位于不同页面上的jquery标签ui

Question

我的是一个使用jsp，ajax和jquery的eclipse中的Web项目。 它有两个JSP pages- home.jsp和second.jsp 。 它还具有单独的css和js文件夹。

在second.jsp我已经并入使用标签面板div ， ul和a由具有适当连接它们的标签css和javascript/jquery 。 作为单独的文件，它运行平稳。

在home.jsp我想使用JQuery Ajax的load()方法调用second.jsp 。 因此，为了实现这一点，我将所有我的css ， jquery和javascript链接从second.jsp到home.jsp 。

但是我现在没有选项卡视图。 以下是代码（文件方式）：

home.jsp ：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#homeDiv{
width: 1000px;
height: 1000px:
}
</style>
<link href="css/styles.css" rel="stylesheet" type="text/css">   
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/jkl.js" type="text/javascript"></script>        
<script type="text/javascript">
$(document).ready(function(){
    $('#but').click(function(){
        $('#homeDiv').load('folder2/second.jsp #main');// I wanted to load specific part of second.jsp i.e div with ID `main`.
        return false;
    }); 
});
</script>

</head>
<body>
<button id="but">press</button><br>
<div id="homeDiv"></div>
</body>
</html>

second.jsp ：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div id="main">
                <h1>Tabbed Panels</h1>
                <div class="tabbedPanels" id="tabbed1">
                    <ul class="tabs">
                        <li><a href="#panel1" tabindex="1">Tab 1</a></li>
                        <li><a href="#panel2" tabindex="2">Tab 2</a></li>
                        <li><a href="#panel3" tabindex="3">Tab 3</a></li>
                    </ul>
                    <div class="panelContainer">
                        <div id="panel1" class="panel">
                            <h2>Panel 1 content</h2>
                            <p>Apples</p>
                        </div>
                        <div id="panel2" class="panel">
                            <h2>Panel 2 content</h2>
                            <p>Mango</p>
                        </div>
                        <div id="panel3" class="panel">
                            <h2>Panel 3 content</h2>
                            <p>Potato</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

styles.css

.tabbedPanels {
    width: 70%;
    float: left;
    margin-right: 10px; 
}
.tabs {
    margin: 20;
    padding: 20;    
    zoom : 1;
}
.tabs li {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    -webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}
.tabs a {
    display: block;
    text-decoration: none;
    padding: 3px 5px;
    background-color: rgb(110,138,195);
    margin-right: 1px;
    border: 2px solid rgb(153,153,153);
    margin-bottom: -2px;
    width: 60px;
    -webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}
.tabs .active {
    border-bottom: 1px solid white;
    background-color: white;
    color: rgb(51,72,115);
    position: relative;
}

.panelContainer {
    clear: both;
    margin-bottom: 25px;    
    border: 1px solid rgb(153,153,153); 
    background-color: white;
    padding: 10px;
}

.panel h2 {
    color: rgb(57,78,121);
    text-shadow: none;      
}
.panel p {
    color: black;   
}

jquery

$(document).ready(function() {
    $('.tabs a').bind('click focus',function() {
        var $this = $(this);

        // hide panels
        $this.parents('.tabbedPanels')
            .find('.panel').hide().end()
            .find('.active').removeClass('active');

        // add active state to new tab
        $this.addClass('active').blur();    

        // retrieve href from link (is id of panel to display)
        var panel = $this.attr('href');
        // show panel
        $(panel).show();
        // don't follow link
        return false;
    }); // end click

    $('.tabs').find('li:first a').click();
}); // end ready

我正在使用jquery-1.10.2.js。 谁能解决我的问题？

Answer 1

我的问题解决了。 代替使用.bind方法，我不得不使用(document).on()方法。 我将我的.js文件替换为以下代码。

$(document).ready(function() {
    //alert('outside');
    //$('.tabs a').bind('click focus',function() {
        $(document).on('click', '.tabs a', function()
                {
        var $this = $(this);
        //alert('?????');
        // hide panels
        $this.parents('.tabbedPanels')
            .find('.panel').hide().end()
            .find('.active').removeClass('active');

        // add active state to new tab
        $this.addClass('active').blur();    

        // retrieve href from link (is id of panel to display)
        var panel = $this.attr('href');
        // show panel
        $(panel).show();
        // don't follow link
        return false;
    }); // end click

    $('.tabs').find('li:first a').click();
}); // end ready