I am facing an issue in my code where replacing .live with .on is not working. I have been trying to identify the problem but haven't found a solution yet.
$(document).ready(function () {
/* Reading the data from XML file*/
$.ajax({
type: "GET",
url: "photos.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('item').each(function () {
var path = $(this).attr('path');
var width = $(this).attr('width');
var height = $(this).attr('height');
var id = $(this).attr('id');
var alt = $(this).attr('alt');
var longdesc = $(this).find('longdesc').text();
var description = $(this).find('desc').text();
$('#myImageFlow').append('<img src="' + path + '" id=' + id + ' height="' + height + '" width="' + width + '" longdesc="' + longdesc + '" alt="' + alt + '"/>');
imgArr[i] = description;
imgFront[i] = longdesc;
i = i + 1;
});
$(xml).promise().done(function () {
console.log("image completed loading");
$('img:lt(4)').removeClass('t2').addClass('t1');
$('img:gt(3)').removeClass('t1').addClass('t2');
$('img#id12').removeClass('t1').addClass('t2');
$('img#id1').removeClass();
//alert('Front Initial Text is'+imgFront[1]);
window.setTimeout(function () {
$("#front").html(imgFront[1]);
$("#front").css("background", "gray");
}, 1500);
});
}
});
$.getScript('js/code.photoswipe.jquery-3.0.5.js');
});
/*front div called when front or back is called */
$('#front').on('click', function (event) {
event.stopPropagation();
transitIt(this);
// alert('Front Clicked glob e='+globe);
});
$('#myImageFlow img').on("click", function () {
event.stopPropagation();
alert('htmlcalled image Clicked Called=' + clickEnabled);
});