不断变化的Div中的Ajax调用

Question

我正在第一个Ajax项目上工作，但找不到此问题的解决方案：

这是我的Ajax代码：

$(document).ready(function(){

var seite = $('div.ipadSeite');

$('a').on('click', function(e){
    var href = $(this).attr('href');

    seite.load( href );
    e.preventDefault(); 
});

}）;

这是index.php：

....<div id="ipadHeader">
        <nav>
            <ul>
                <li>100% |=|</li>
                <li>
                    <?php 
                        echo date("h:i a");
                    ?> 
                </li>
                <li>TWT</li>
            </ul>
        </nav>
    </div>
    <div class="ipadSeite">
        <img src="../images/homescreen.png" id="homescreenImage" />
        <a href="seiten/1app.php"><div id="appIcon"><p>TWT</p></div></a>
    </div>
</div>....

首次启动应用程序时，链接：a href =“ seiten / 1app.php正在工作！所以我创建了一个主页按钮以返回到index.php。这是将文件通过Ajax加载回“ home” ：

    <img src="../images/homescreen.png" id="homescreenImage" />
<a href="informationen.php"><div id="appIcon"><p>TWT</p></div></a>

它只是在“ ipadSeite”中加载相同的内容。 我的第一个问题：这是错误的吧？ 应该更容易吗？ 但是，当链接到index.php时，它将加载整个网站（页眉，页脚..），并且功能中断。

第二个问题：我的解决方案有效，但是当我再次单击该按钮时，它没有发出Ajax请求。 而是打开一个常规链接，但没有CSS。 我真的找不到任何解决方案。 我希望你们能理解我的问题和我的解释。

非常感谢你！ 凯文

Answer 1

委托功能：

$(document).delegate('a','click',function(){//Write your function here})

“开”，我觉得非常有情境。 “委托”和“实时”都可以与异步加载元素一起很好地工作。

罗伯特

Answer 2

据我粗略地看，您不是在使用AJAX，而只是在使用jQuery的功能。

您到底想做什么？ 如果您逐点详细介绍了用户的旅程，那么我相信有人可以为您提供帮助。

罗伯特

[编辑]

您是否尝试过访问主页上的特定部分：

<script>
  $("#new-nav").load("/ #jq-footerNavigation li");
</script>

上面的代码说从首页“ /”获取一些数据并将其加载到“＃new-nav”元素中

在您的情况下，它应该是.load（'/ .ipadSeite'）

Answer 3

首先，我认为您在id中有class时就引用了div

var seite = $（'div.ipadSeite'）; => var seite = $（'＃ipadSeite'）;