Question

我的点击事件有点问题。

我有一个AJAX函数可以检索JSON对象。效果很好，我的照片就像我想要的那样出现。

我的问题是，每张看起来都有点击功能的图片我将调用一个函数。但它不起作用。

以下是我的代码：

    $.getJSON('url-to-my.fle.php', function( obj ){

    for( var i = 0; i < obj.length; i++ ){

        var value = obj[ i ];
        FOO.bar.app.img.prototype.renderThumbs( myWindow, value['fileName'], value['width'], value['height'] );
    }
});

上面的代码可行，我的功能renderThumbs

FOO.bar.app.img.prototype.renderThumbs = function( myWindow, imgURL, imgWidth, imgHeight){
    var images = "";

    images = '<div class="imgBox"><a href="#"><img src="images/thumbs/'+ imgURL +'" alt="" /></a></div>';

    $('.content', myWindow).append(images).hide().fadeIn(800);
    var that = this;

    console.log($(images).find('img'));
    var img = $(images).find('img');

    $(img).live('click', function() {
        console.log('click');
        that.getImg(imgURL, imgWidth, imgHeight);
    });
};

我在firebug中没有错误，当我点击图像时没有任何反应。我测试过。 click（）; .bind（），你可以在我的代码中看到.live（），它与所有的事件处理程序都是一样的。

关于我如何解决这个问题的一些提示？

我无法在我的img标签中发送ID号，但是当我有两个画廊运行时，它就会出错。

Answer 1

看起来您的错误是images是一个字符串，而不是您插入DOM的实际图像元素。简化代码：

images = '<div><img /></div>';
$('.content').append(images);   
var img = $(images).find('img');

基本上，您要创建DOM元素两次：一次在append中，一次在jquery选择器中，您调用find。将其更改为此应该有效：

images = $('<div class="imgBox"><a href="#"><img src="images/thumbs/'+ imgURL +'" alt="" /></a></div>';);

因为现在只创建一次DOM元素。

Answer 2

您正在处理从字符串图像创建的jQuery对象，而不是在带有类content的div下附加的DOM对象上。尝试：

// use last-child to get latest added div
console.log($(".content:last-child").find('img')); 
var img = $(".content:last-child").find('img');

另请注意，使用live时，您只需将其设置一次，也许是在准备就绪之前。您可以使用选择器.content img来获取.content div中的所有img标记。如果内容包含其他图像，您不希望点击该动作，请尝试.imgBox img。

Answer 3

如果您更改此部分：

 $(img).live('click', function() {        
      console.log('click');
     $(this).getImg(imgURL, imgWidth, imgHeight);
 });

并使其成为（在你的职能之外）：

 $('img','.imgBox').live('click', function() {        
      console.log('click');
    $(this).getImg(imgURL, imgWidth, imgHeight);
 });

或者使用委托并将其置于你的功能之外

 $('.imgBox').delegate('img','click', function() {        
      console.log('click');
     $(this).getImg(imgURL, imgWidth, imgHeight);
 });

直接捕获img元素？

jQuery点击问题

3 个答案: