JQuery加载帮助

我想使用加载（）将一些HTML放在页面上的div。我有这样的一堆链接：JQuery加载帮助

<div id="slideshow"> 
     <div id="slides"> 
     <div class="projects"> 
      <a href="work/mobus.html" title="Mobus Fabrics Website"> 
       <img src="images/work/mobus.jpg" alt="Mobus Fabrics Website" width="280" height="100" /> 
      </a> 

      <a href="work/eglin.html" title="Eglin Ltd Website"> 
       <img src="images/work/eglin.jpg" alt="Eglin Ltd Website" width="280" height="100" /> 
      </a> 

      <a href="work/first-brands.html" title="First Brands Website"> 
       <img src="images/work/first-brands.jpg" alt="First Brands Website" width="280" height="100" /> 
      </a> 
     </div> 

     <a id="prev"></a> 
     <a id="next"></a> 
    </div>

和我的jQuery代码看起来是这样的：

$('.projects a').click(function() { 
    $('#work').load(this.href); 
});

的问题是点击后的HTML被放置在#work div的，HTML中加载另一页。请任何人都可以帮忙？

来源

2010-04-01 mtwallet

你能澄清你的意思是什么“的问题时，点击HTML被放置在#work div的，HTML是加载其他页面。”此外，我没有看到任何元素在您的HTML与工作的ID。这可能是问题吗？ – JohnFx 2010-04-01 15:50:37

此外，如果您的网页（例如：work/mobus.html）为完整页面并且包含标签，则最终会生成无效的DOM – 2010-04-01 15:52:15

@JohnFx问题是我有另一个具有相同名称的ID。谢谢您的帮助。 – mtwallet 2010-04-01 16:22:40

您需要防止默认动作停止HREF加载：

$('.projects a').click(function(event) { 
    $('#work').load(this.href); 

    event.preventDefault(); 
});

你也可以看到人们这样做达到相同的：

$('.projects a').click(function(event) { 
    $('#work').load(this.href); 

    return false; 
});

然而，这种方法将停止事件冒泡进一步，以及防止默认操作。如果您有任何delegate或live方法在DOM树上进一步侦听相同事件，则执行return false将停止正在调用这些处理程序。

编辑：回调函数：

$('.projects a').click(function(event) { 
    $('#work').load(this.href, function (text) { 
     alert("This loaded: " + text); 
    }); 

    event.preventDefault(); 
});

来源

2010-04-01 15:49:35 Matt

@Matt似乎禁用整个按钮，它不会加载href，但它也不会将HTML放在＃工作 – mtwallet 2010-04-01 15:53:00

它会这样做。检查是否存在具有工作标识的元素。尝试添加回调函数以确保请求正在完成：添加一个函数作为第二个参数并添加一个简单的警报或其他内容。查看我的编辑例子。在click事件中添加一个警报以证明处理程序正在被调用。 – Matt 2010-04-01 15:55:44

@Matt我在页面上有另一个同名的ID。非常感谢我的赞赏！ – mtwallet 2010-04-01 16:00:24

你必须防止事件链接..浏览器最终将跟随链接。

，请参阅preventDefault

来源

2010-04-01 15:51:16

JQuery加载帮助

回答

相关问题