Jquery点击功能不加载新内容

Jquery click function not loading new content

本文关键字：加载 新内容 功能 Jquery      更新时间：2023-09-26

由于某些原因，jquery没有将新的html加载到#textoPequenodiv中。它实际上删除了旧的内容，只要它得到。

下面是html代码: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="include/javascript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Opera</title>
</head>
<body>
    <div class="main">
        <div id="header">
            <h1 id="logo">
                <a href="#">Linux Logo</a>
            </h1>
            <ul>
                <li><a href="test.html">Home</a></li>
                <li><a href="test">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
            <div id="player"></div>
        </div>
    <div id="imagen"></div>
    <h2 id="textoGrande"><p>Opera ahora<br /> mas acojedor...</p>
    </h2><h3 id="textoPequeno"><p>En su nueva versión, Opera apuesta por un nuevo diseño y pestañas visuales, un motor más veloz que incrementa su velocidad en un 40% frente a su anterior versión y un mejor soporte de estándares.</p>
    </h3></div>

</body></html>

jquery代码

    $("li a").live("click", function(){
       $("#textoPequeno").load($(this).attr('href')+' .main');    
       return false;
});

请查看活样:http://gabrielmeono.com/working/

编辑:

如果我从javascript代码中删除main，页面将不会在div内加载，它将保持原样。

去掉+ ' .main' 

$("li a").live("click", function(){
   $("#textoPequeno").load( $(this).attr('href') );    
   return false;
});

可以，只要在'href'处有内容加载到#textoPequeno

你的代码是好的，你的html是错误的。

看起来你正在尝试创建独立的页面，也有通过ajax加载的能力。

您将' .main'附加到.load()调用中，这相当于从返回的内容中选择'.main'。如果你这样做，你所有的html页面需要有一个元素与class='main'在它。

我的建议是使用id='main'而不是类。然后将呼叫改为:$("#textoPequeno").load($(this).attr('href')+' #main');

rkw的答案正确。我想补充的是，你也可以将#main移动到实际的href prop中。它可能看起来不多，但它将减少一些开销，并且在AJAX调用失败(或由于其他一些原因)的情况下，将用户定向到实际的href -它们将被发送到正确的位置。

相关文章：