.live工作，但.on不工作

Question

在我的代码中，当我用.on替换.live时，它不工作吗？我找不到问题所在。

$(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').live('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);
}); 

Answer 1

试试这个：

$('body').on('click', '#myImageFlow img', function() {
    // your code
});

参考文献：

• .on() - jQuery应用编程接口文档

Answer 2

您的委派可能没有正确定义：

$('#myImageFlow').on("click", 'img', function(event) {
    event.stopPropagation();
    alert('htmlcalled image Clicked Called=' + clickEnabled);
});

假设#myImageFlow没有从DOM中删除，它是事件委托的一个很好的候选者。此外，您的单击处理程序中缺少event参数。

Answer 3

试试这个-

$('#myImageFlow').on("click", "img", function(event) 
{
    event.stopPropagation();
    alert('htmlcalled image Clicked Called='+clickEnabled);
});

或

$('html').on("click", "#myImageFlow img", function(event) 
{
    event.stopPropagation();
    alert('htmlcalled image Clicked Called='+clickEnabled);
});