jquery - 使用 ajax 加载的元素的单击事件

Question

我正在制作图像滑块。我正在使用 ajax 加载所有图像。我想为图像编写单击事件，但因为它们加载了 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 方法。click 事件在没有 Ajax 功能的情况下工作正常。

Answer 1

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

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

您也可以将它绑定在更接近img's like的容器上div。并且.live()已在最新版本的 JQuery 中被弃用。

Answer 2

利用.on

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

假设您使用的是旧版本的 jQuery，它确实有.live，

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

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

这会起作用：

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

但你应该使用.onas.live在最新版本的 jQuery 中被删除。

Answer 3

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

    alert("image clicked");     
   });