jquery lazyload not run when using ajax? - php

Question

I have a sample code:
<script src="js/jquery-1.4.2.min_2.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("img").lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });
});
</script>
click here
<div id="result"></div>
$(document).ready(function() {
$(".click").click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url:'',
data: '',
async: true,
success: function(response) {
$('#result').html('<img src="test.png" />');
}
});
});
}
But when result request ajax is result is
<img src="images/grey.gif" data-original="test.png" />
How to fix it with result is
<img src="test.png" data-original="test.png" />

Answer 1

You seem to assign the Lazyload before the image element is actually in your HTMl.. You need to assign it in the success callback of ajax function..
<script src="js/jquery-1.4.2.min_2.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
click here
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function() {
$(".click").click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url:'yoururl',
data: '{}',
async: true,
success: function(response) {
// If response contains the image src
// then replace the src of the image with the response
$('#result').html('<img src="test.png" data-original="test.png" />');
$("#result img").attr('src', 'images/grey.gif')
.lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });
}
});
});
});