Question

更新4：

我有一种可怕的感觉，这种情况已经下滑到目前为止还没有人再看到它了......但为了以防万一...

我正在尝试将可点击的div代码和ajax加载代码组合在一起（请参阅下面的主代码块）每次我添加可点击的div代码时，加载都会停止工作。我试过了：

$(".work").on('click',function(){
  window.location=$(this).find("a").attr("href");
});

$('.work a').on('click',function(event) {
    event.preventDefault();
 etc

此

 $('div.work').on ('click',function(event) {

    window.location=$(this).find("a").attr("href");

    $(this).attr("href"); event.preventDefault();

和许多其他排列 - 但他们都停止.load工作

已经耗尽了想法并变得绝望 - 请....

更新3：

仍然在努力......

更新2

由于以下答案不断获得投票（即使我不确定为什么它适用...）我尝试了以下内容：首先我更新到jQuery 1.7.1并使用.on作为可点击的div代码：

$(".work").on('click',function(){
  window.location=$(this).find("a").attr("href");
});

没有任何区别所以我尝试将其应用于ajax加载代码：

$('div.clickable, .work a').on('click',function(event) {
    event.preventDefault();
etc

也没有任何区别......

我真的很感激为什么.live（.on）适用于这种情况，当我不想影响ajax加载的任何内容时...显然至少有4个成员认为它是......

更新：

如果它有帮助您可以看到下面的2个不同版本。第一个显示了ajax负载的发生。第二个只是为可点击的div添加代码，这会阻止ajax加载工作：

http://www.spiritlevel.co.uk/clicktest/ajaxload.html

http://www.spiritlevel.co.uk/clicktest/divclick.html

原始邮件：

我有一个div元素（.work），其中包含一个h3标记，其中包含一个锚点，在单击时将ajax内容加载到另一个div（.pictures）中。

HTML看起来像这样：

<div class="work">
 <img class="introPic" src="images/thumb.jpg" width="250" height="99" />
 <h3><img class="arrow" src="images/arrow_open.gif" alt="&gt;" /><a class="titlelink" href="project2.html">Project 2</a></h3>
  <div class="projectIntro">
    <p>This is some intro text for project 2</p>
  </div>
 <div class="pictures"></div>
</div>

使用此代码我可以正常运行ajax：

jQuery(function($) {
// Adds the open and close effect for anchor links showing work.    

$('.work a').click(function(event) {
    event.preventDefault();     

    var parent = $(this).parents(".work");
    var content_holder = parent.children(".pictures");

    if (parent.hasClass("selected_work")) {
        close_other();
        return;
    }

    close_other();

    parent.addClass("selected_work");

    content_holder.load(this + " #ajaxContent", function() {
        $(this).find('#slider').nivoSlider({
            effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
    animSpeed:300,
    pauseTime:4000,
    controlNav:true,
    pauseOnHover:true //Stop animation while hovering
});
     });

    $('.selected_work img.arrow').attr("src", "images/arrow_close.gif");
});

function close_other() {
    var selected_work = $('.selected_work');

    selected_work.children('.pictures').empty();    
    $('.selected_work img.arrow').attr("src", "images/arrow_open.gif");
    selected_work.removeClass("selected_work")
}

$('.work a.titlelink').click(function() {
     $('html,body').animate({scrollTop: $(this).offset().top}, 500);
     });

});

现在我想让整个.work div可以点击，我找到了一些我工作过的代码：

$(document).ready(function(){
  var block = $(".work");
  block.click(function(){
    window.location = $(this).find("a:first").attr("href")
   });
   block.addClass("clickable");
   block.hover(function(){
     window.status = $(this).find("a:first").attr("href")
   }, function(){
      window.status = ""
   })
});

出于某种原因，我无法让可点击的div代码的更短和更常见的版本工作......这不是我的主要问题，但如果有人能告诉我原因会很好：

$(".work").click(function(){
  window.location=$(this).find("a").attr("href"); return false;
});

我的主要问题是虽然我可以单独使用可点击的div代码和ajax加载代码，但我无法让它们一起工作。如果首先是可点击的div代码，则锚点链接到新页面而不是将它们加载到同一页面中。如果首先出现ajax加载代码，则忽略可点击的div代码......

我还想确保单击.work div时我的滚动仍然有效，就像点击h3链接时一样 - 即这段代码：

$('.work a.titlelink').click(function() {
     $('html,body').animate({scrollTop: $(this).offset().top}, 500);
     });

希望社区中的一位善意的成员可以帮助我解决这个问题！

感谢

Answer 1

我认为问题在于你正在约束＆＃34;点击＆＃34;事件尚未存在的元素 - 仅在ajax加载后才存在。我是对的吗？

在这种情况下，您需要使用jQuery＆＃39; live＆＃39;方法

此方法提供了一种将委托事件处理程序附加到页面的文档元素的方法，这可以简化事件处理程序在内容动态添加到页面时的使用。

例如：

$(".work").live('click', function(){
    window.location=$(this).find("a").attr("href"); return false;
});

如何让可点击的div和ajax加载一起工作

1 个答案: