Как заставить кликабельный div и ajax load работать вместе - PullRequest
Новая
       4

Как заставить кликабельный div и ajax load работать вместе

0 голосов
/ 04 декабря 2011

ОБНОВЛЕНИЕ 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);
     });

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

спасибо

1 Ответ

6 голосов
/ 04 декабря 2011

Я думаю, что проблема в том, что вы привязываете события click к элементам, которые еще не существуют - которые существуют только после загрузки ajax. Я прав?

В этом случае вам нужно использовать метод live jQuery

Этот метод предоставляет средство для прикрепления делегированных обработчиков событий к элементу документа страницы, что упрощает использование обработчиков событий при динамическом добавлении контента на страницу.

Например: 

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