Сделайте что-нибудь с ajaxified контентом (jQuery)

Question

HTML:

<div>
<img src="image.png" />
</div>

JS:

$("div img").animate({opacity:.5}, 200);

Это JS работает хорошо, когда страница загружена. Но не обрабатывает контент, загруженный ajax. Данный код js является просто примером.

Вопрос в том, как заставить работать некоторый js-код для ajaxified контента?

---

Пробовали так:

function loadDone(){
    $("div img").animate({opacity:.5}, 200);
};

loadDone();

$.ajax({
    url: "test.html",
    success: function(){
        //do something
        loadDone();
    }
});

Но это не работает.

Я знаю, как добавить триггеры, проблема в том, что этот код не использует их. Он просто работает после загрузки страницы, а затем останавливается. Должно работать и для ajaxified контента.

Answer 1

Ваш вопрос немного расплывчат, но это может помочь.

Предполагается, что вы запустите этот код на готовом документе:

$(function() { 
  if ($("div img").width() > $("div").width()){
    $("div img").css({"width": $("div").width()});
  }
});

Вы можете повторить этот вызов в обратном вызове ajax:

$("#some_div").load("/html_fragment_with_cool_image", function() { 
  if ($("div img").width() > $("div").width()){
    $("div img").css({"width": $("div").width()});
  }
});

Или, сделайте еще один шаг и оберните его в функцию.

function doDivStuff() {
  if ($("div img").width() > $("div").width()){
    $("div img").css({"width": $("div").width()});
  }
}

И затем вызовите его, когда вам нужно.

$(function() { 
  doDivStuff();
});

$("#some_div").load("/html_fragment_with_cool_image", function() { 
  doDivStuff();
});

Answer 2

Возможно, вам потребуется выполнить ту же функцию, чтобы исправить ширину img после вызовов Ajax.Вы также можете рассмотреть возможность помещения класса (или данных) в измененный img и фильтрации по классу при последующих вызовах функции resize.

var resizeImages = function() { 
    if ($("div img").width() > $("div").width()){
        $("div img").css({"width": $("div").width()});
    }
}

//You could use the global event callback or 
//attach to the individual ajax requests that you know will add images
$(document.body).ajaxSuccess(resizeImages);

Answer 3

Зависит от того, откуда вы вызываете этот код.

Ваш Ajax-вызов будет иметь обратный вызов. Просто позвоните по этому коду.

$(document).ready(function() {
  //call the method when the page loads
  setImageWidth();
}

function setImageWidth() {
  if ($("div img").width() > $("div").width()){
      $("div img").css({"width": $("div").width()});
  }
}

function doSomeAjax() {
  $.ajax({
    type : "GET",
    url : 'http://somepath',
    success :
    // Call the method when receive successful response
    function(response) {
        setImageWidth();
     }
  });
} 

Answer 4

Для событий вы можете использовать команду live вместо привязки. Это заставит события запускаться для контента, загруженного через ajax.

Для кода, подобного вашему примеру, вам нужно будет запустить этот код после загрузки любого HTML через ajax. Обычно это происходит из-за успешного обратного вызова вызова ajax.

Answer 5

Не уверен, что я понимаю ваш вопрос, но вы должны запустить JS после загрузки содержимого ajax в DOM текущей страницы.

Просто сделайте это с помощью обратного вызова ajax onsucess (jquery)