jQuery не работает после того, как содержимое загружается через AJAX

Question

На this page У меня есть всплывающее окно jQuery и уменьшенные изображения. Если я нажимаю на миниатюры, изображения отлично изменяются. Кроме того, когда я нажимаю на большую желтую кнопку TV «QuickBook TV» в нижнем колонтитуле, всплывающее окно выглядит идеально, как я этого хочу.

Однако, когда я нажимаю кнопки «Далее» или «Пред», AJAX используется для загрузки нового содержимого, и мой jQuery больше не работает для всплывающих или миниатюр. Я искал несколько форумов, которые искали информацию по этой проблеме, но из-за ограниченного знания jQuery я не мог понять, что мне нужно делать.

Ниже всплывающий JQuery

$(document).ready(function() { 

     $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" }); 
     $(".inline").colorbox({ inline: true, width: "50%" }); 
     $(".callbacks").colorbox({ 
      onOpen: function() { alert('onOpen: colorbox is about to open'); }, 
      onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); }, 
      onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); }, 
      onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); }, 
      onClosed: function() { alert('onClosed: colorbox has completely closed'); } 
     }); 

     //Example of preserving a JavaScript event for inline calls. 
     $("#click").click(function() { 
      $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here."); 
      return false; 
     }); 
    }); 

И это эскизы JQuery

$(function() { 

var xwidth = ($('.image-popout img').width())/1; 
var xheight = ($('.image-popout img').height())/1; 

$('.image-popout img').css(
     {'width': xwidth, 'height': xheight} 
); //By default set the width and height of the image. 

$('.image-popout img').parent().css(
     {'width': xwidth, 'height': xheight} 
); 

$('.image-popout img').hover(
    function() { 
     $(this).stop().animate({ 
      width : xwidth * 3, 
      height : xheight * 3, 
      margin : -(xwidth/3) 
      }, 200 
     ); //END FUNCTION 

     $(this).addClass('image-popout-shadow'); 

    }, //END HOVER IN 
    function() { 
     $(this).stop().animate({ 
      width : xwidth, 
      height : xheight, 
      margin : 0 
      }, 200, function() { 
       $(this).removeClass('image-popout-shadow'); 
    }); //END FUNCTION 

    } 
); 

}); 

Answer 1

Селекторы jQuery выбирают совпадающие элементы, которые существуют в DOM при выполнении кода и не динамически обновляются. Когда вы вызываете функцию, такую ​​как .hover(), чтобы добавить обработчик событий, она добавляет их только к этим элементам. Когда вы выполняете вызов AJAX и заменяете раздел своей страницы, вы удаляете эти элементы с привязанными к ним обработчиками событий и заменяете их новыми элементами. Даже если эти элементы теперь соответствуют этому селектору, они не получают привязки обработчика события, потому что код, который он выполнил, уже выполнен.

обработчики событий

Специально для обработчиков событий (т.е. .click()), вы можете использовать делегирование событий, чтобы обойти эту проблему. Основной принцип заключается в том, что вы привязываете обработчик событий к статическому (существует, когда страница загружается, не заменяется) элемент, который будет содержать весь ваш динамический (загруженный AJAX) контент. Вы можете узнать больше о делегировании событий в jQuery documentation.

Для обработчика событий click, обновленный код будет выглядеть следующим образом:

$(document).on('click', "#click", function() { 
    $('#click').css({ 
     "background-color": "#f00", 
     "color": "#fff", 
     "cursor": "inherit" 
    }).text("Open this window again and this message will still be here."); 
    return false; 
}); 

Это было бы связать обработчик событий для всего документа (так никогда не удаляются, пока страница не выгружается), который будет реагировать до click событий на элементе с id имущество click. В идеале вы бы использовали что-то ближе к своим динамическим элементам в DOM (возможно, <div> на вашей странице, которая всегда присутствует и содержит все содержимое вашей страницы), так как это немного улучшит эффективность.

Проблема возникает, когда вам нужно обрабатывать .hover().В JavaScript нет действительного события hover, jQuery просто предоставляет эту функцию как удобную стенографию для привязки обработчиков событий к событиям mouseenter и mouseleave. Вы можете, однако, использовать делегирование событий:

$(document).on({ 
    mouseenter: function() { 
     $(this).stop().animate({ 
      width: xwidth * 3, 
      height: xheight * 3, 
      margin: -(xwidth/3) 
     }, 200); //END FUNCTION 

     $(this).addClass('image-popout-shadow'); 
    }, 
    mouseleave: function() { 
     $(this).stop().animate({ 
      width: xwidth, 
      height: xheight, 
      margin: 0 
     }, 200, function() { 
      $(this).removeClass('image-popout-shadow'); 
     }); //END FUNCTION 

    } 
}, '.image-popout img'); 

---

JQuery плагин

Это охватывает привязки обработчика событий. Однако это еще не все, что вы делаете. Вы также инициализируете плагин jQuery (colorbox), и нет возможности делегировать их элементам. Вам придется просто называть эти строки снова, когда вы загрузили свой контент AJAX; самый простой способ будет двигаться тех, в отдельное имени функции, которую можно затем вызвать в обоих местах (на странице загрузке и в вашем AJAX просит success обратный вызова):

function initialiseColorbox() { 
    $(".iframe").colorbox({ 
     iframe: true, 
     width: "1000px", 
     height: "500px" 
    }); 
    $(".inline").colorbox({ 
     inline: true, 
     width: "50%" 
    }); 
    $(".callbacks").colorbox({ 
     onOpen: function() { 
      alert('onOpen: colorbox is about to open'); 
     }, 
     onLoad: function() { 
      alert('onLoad: colorbox has started to load the targeted content'); 
     }, 
     onComplete: function() { 
      alert('onComplete: colorbox has displayed the loaded content'); 
     }, 
     onCleanup: function() { 
      alert('onCleanup: colorbox has begun the close process'); 
     }, 
     onClosed: function() { 
      alert('onClosed: colorbox has completely closed'); 
     } 
    }); 
} 

Answer 2

обработчики событий теряются при замене содержимого. Когда вы задаете hover событий, jQuery устанавливает их в событиях на странице в настоящее время. Поэтому, когда вы заменяете их на ajax, события не связаны с этими элементами, потому что они новы.

Чтобы исправить это можно либо вызвать функцию, которая связывает их раз или вы можете вместо этого установить обработчик событий на документе, как и в этом answer используя $ (документ) .он

Таким образом, событие устанавливается на документ и любые новые элементы получат вызванное событие.

Answer 3

Вы можете использовать полную функцию JQuery AJAX после получения данные формы где-то, он будет видеть обновленные элементы после AJAX полного

Answer 4

  // EXAMPLE FOR JQUERY AJAX COMPLETE FUNC. 
      $.ajax({ 
      // get a form template first 
      url: "../FPFU/templates/yeni-workout-form.html", 
      type: "get", 
      success: function(data){ 
      // insert this template into your container 
       $(".content").html(data); 
      }, 
      error: function(){ 
       alert_fail.removeClass("gizle"); 
       alert_fail.addClass("goster"); 
       alert_fail.html("Template getirilemedi."); 
      }, 
      complete: function(){ 
       // after all done you can manupulate here your new content 
       // tinymce yükleme 
       tinymce.init({ 
        selector: '#workout-aciklama' 
       }); 
      } 

Answer 5

Если бы та же проблема, прежде чем я смог нашел решение, которое работало для меня. Итак, если кто-то в будущем может дать ему шанс и сообщить мне, было ли это правильно, поскольку все решения, которые я смог найти, были немного сложнее, чем это.

Как сказал Тамер Дургун, мы также разместим ваш код внутри ajaxStop, поэтому ваш код будет восстановлен каждый раз, когда любое событие будет завершено ajax.

$(document).ajaxStop(function() { 

//your code 

} 

Работал для меня :)