Живая функция jQuery не работает

Question

Я генерирую контент, используя Ajax, и поэтому мне нужно использовать .live(), чтобы прикрепить функцию к событию click для сгенерированных ссылок. К сожалению, это не работает, и я не знаю почему. Я пытался поместить это как внутри, так и вне контекста domready; неудачно. Это работало, когда я просто использовал $('a').click(), но это не работало на ссылках, извлеченных из Ajax. Есть мысли?

$(document).ready(function(){
    $('#content a').live('click', function(){
        var moveIt = $("#content").outerWidth();
        alert(moveIt);
        $('#content').animate({'maxWidth': '+=' + moveIt / 2 + 'px', 'left': '6%'}, 'slow');
    });

    $('a.back').live('click',function(){
        $('#content').animate({'maxWidth': '360px', 'left' : '43%'}, 400);
    });
});

А вот и HTML:

<section id="content" class="textiles"><!--content start-->
<div id="ajax-container">
    <div id="ajax-content"><!--test-->
        <h1>Installations</h1>
        <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/light-fixtures" title="light&nbsp;fixtures"><img src="http://www.qp2creative.com/clients/dfrank/images/51t.jpg" alt="Seating Area with Light Fixtures" height="64" width="140"></a>
        <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/scad-fibers-installation" title="SCAD fibers&nbsp;installation"><img src="http://www.qp2creative.com/clients/dfrank/images/49t.jpg" alt="Installation in Context" height="64" width="140"></a>
        <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/other-gallery" title="fashion 2008&nbsp;photoshoot"><img src="http://www.qp2creative.com/clients/dfrank/images/47t.jpg" alt="fashion's backdrop" height="64" width="140"></a>
        <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/qp2-creative-gallery" title="QP2 Creative&nbsp;Gallery"><img src="http://www.qp2creative.com/clients/dfrank/images/41t.jpg" alt="QP2 Creative gallery" title=""></a>
        </div>
    </div><!--end ajax container-->
</section><!--end content-->

Answer 1

Ваш код JavaScript внутри тега body не работает со скриптом внутри тега head . В вашем теге body a щелкните привязку" return false ". и это прекращает вызывать любые привязки "click" далее.

Я нашел три проблемы в вашем коде. После исправления я получил окно с предупреждением.

1. завернул ваш код в $(document).ready(function(){ }); точно так же, как вы задали вопрос (но его нет на демонстрационном сайте).
2. на relink: function() { в вашем теле тега - прокомментировано " return false; " и

3. исправлено отсутствие точки с запятой в smd_ajax.spinit (1)

   if ((site_url.indexOf(url.host) >= 0) && (bindit == true)) {
       smd_ajax.spinit(1); //HERE 3rd Edit.
       jQuery(this).unbind();
       smd_ajax.grab(this.href);
       //return false; //HERE 2nd Edit.
   }
   

Вы можете использовать preventDefault();, чтобы остановить поведение по умолчанию.

$(document).ready(function(){
    $('#content a').live('click', function(e){
        var moveIt = $("#content").outerWidth();
        alert(moveIt);
        $('#content').animate({'maxWidth': '+=' + moveIt / 2 + 'px', 'left': '6%'}, 'slow');
        e.preventDefault(); //Hyperlink won't load page link.
    });
    $('a.back').live('click',function(){
       $('#content').animate({'maxWidth': '360px', 'left' : '43%'}, 400);
    });
});

Answer 2

Я посмотрел на ваш сайт - я не могу объяснить, что ваше оповещение не работает, но кажется, что реализация ajax немного запутана.Я думаю, что вы могли бы упростить его и избежать странной проблемы с делегированием / работой в реальном времени.

Рассматривали ли вы возможность использования простой функции jQuery.ajax или jQuery.load для изменения динамического содержимого?Я знаю, что у этих функций есть обратные вызовы, которые позволяют вам запускать последующие «успешные» функции после завершения вашего вызова ajax.Возможно, один из этих обратных вызовов будет хорошим местом для запуска функции изменения размера?

Answer 3

Вы смотрели на .delegate()? Он делает почти то же самое, что и .live(), но позволяет вам указать дополнительный селектор для фильтрации любых сработавших элементов.

$('#content').delegate('a', 'click', function() {
  // code here
}

Не уверен, почему ваш конкретный пример не работает, но если у вас есть хотя бы jQuery 1.4.2, попробуйте обновить до .delegate().