Question

.on没有在我的页面上工作，无法将click事件应用于使用ajax加载的元素。 #myimageflow是容器，我使用ajax加载图像。当我正在尝试.on for click它不起作用.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;

            });
        }
    });

    /* ===================================== */
    //$("#myImageFlow").show();
    $.getScript('js/iSlider.js');
    $.getScript('js/code.photoswipe.jquery-3.0.5.js');
});

/*front div called when front or back is called*/

$('#myImageFlow').on("click", 'img', function() {

    alert("image clicked");
});

Answer 1

将此部分放入ready回调：

$('#myImageFlow').on("click", 'img',  function() {
   alert("image clicked");     
});

执行此绑定时必须找到#myImageFlow元素。当您将此代码放在ready回调之外时，它会在元素可用之前执行。

Answer 2

通过制作来解决，

$(document).on('click', 'img', function() {
  alert('htmlcalled image Clicked Called='+clickEnabled);
         ......
            }

Answer 3

.live已弃用。如果您使用旧版本的jQuery .live()将适用于您。 .on将无效

使用.on将事件应用于元素

3 个答案: