Question

我正在制作图像滑块。我正在使用ajax加载所有图像。我想为图像编写click事件，但因为它们加载了ajax而无法正常工作。

            $.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').prepend('<img src="'+path+'" id='+id+'  height="'+height+'"  width="'+ width+'" longdesc="'+longdesc+'" alt="'+alt+'"/>');
                        imgArr[i] = description;
                        i = i+1;

                    });
                }
            }).done(function() {





      /* ===================================== */
      //$("#myImageFlow").show();

      // $("#myImageFlow img").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });


                        $('img:lt(3)').addClass('t1');
                        $('img:gt(3)').addClass('t2');



                    });

      $.getScript('js/iSlider.js');
      $.getScript('js/code.photoswipe.jquery-3.0.5.js');


 });


 $('img').click( function() {

    alert("image clicked");     
   }

我尝试过使用，

$('img').live('load', function() {

但它不起作用。我想在每次点击图像时使用一些css方法。没有Ajax功能，click事件正常工作。

Answer 1

您可以像这样使用.on()：

$('body').on('click','img',function(){
    //do something..
});

您也可以将其绑定在距img div更接近.live()的容器上。在最新版本的JQuery中已经弃用{{1}}。

Answer 2

使用.on

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

假设您正在使用具有.live的旧版jQuery，

$('img').live('load', function() {

不起作用，因为您需要绑定到click，而不是load。

这样可行：

$('img').live('click', function() {

但您应该使用.on，因为.live已在最近版本的jQuery中删除。

Answer 3

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

    alert("image clicked");     
   });

单击用ajax加载的元素的事件

3 个答案: