Как заставить интерактивную загрузку div и ajax работать вместе

ОБНОВЛЕНИЕ 4:

У меня ужасное ощущение, что это зашло так далеко, что никто больше этого не видит ... но просто в случае ...

Я пытаюсь объединить интерактивный код div и код загрузки ajax (см. основной блок кода ниже) Каждый раз, когда я добавляю интерактивный код div, загрузка перестает работать. Я пробовал:

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

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

this

 $('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 участника думают, что это ...

ОБНОВЛЕНИЕ:

В случае, если это поможет, вы можете увидеть две разные версии ниже. Первый показывает, что происходит загрузка 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-код выглядит так:

 
 
Project 2
  

    
This is some intro text for project 2
  
 

У меня загрузка 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);
     });

});  

Теперь я хочу сделать весь div .work интерактивным, и я нашел код, который у меня уже работает:

$(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 игнорируется ...

Я также хочу убедиться, что моя прокрутка по-прежнему работает при нажатии на div .work, как это происходит при нажатии ссылки h3 - т.е. этот фрагмент кода:

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

Надеюсь, какой-нибудь член сообщества поможет мне с этим!

спасибо