Question

基本上它的作用是淡化预先存在的div然后加载图像。加载图像后，将其附加到一个预先存在的div中。然后它附加一个id为xButton的新div。然后它$（'＃xButton'）。click（）应隐藏3个div。但它只是不起作用。如果我将click（）更改为#modalImage或#overlay，它可以工作，但不适用于#xButton。我真的想弄清楚为什么它不起作用以及我应该如何做到这一点。感谢。

$(function(){
                $('#container a').click(function(e){
                    e.preventDefault();
                    var id = $(this).attr('href'),
                    img = new Image();


                    $('#overlay').fadeIn(function(){
                        $('#modalImage').fadeIn();

                    });

                    $(img).load(function(){
                        $(this).hide();
                        $('#modalImage').removeClass('loader').append(this);
                        $(this).fadeIn(function(){
                            var ih = $(this).outerHeight(),
                            iw = $(this).outerWidth(),
                            newH = ($(window).height()/10)*7,
                            newW = ($(window).width()/10)*7;


                            if (ih >= iw && ih >= newH) {
                                $(this).css('height',newH + 'px');
                                $(this).css('width', 'auto');
                            }
                            else if (ih >= iw && newH > ih) {
                                $(this).css('height', ih + 'px');
                                $(this).css('width', 'auto');
                            }
                            else if (iw > ih && iw >= newW) {
                                if ((newW / (iw / ih)) > newH) {
                                    $(this).css('width', 'auto');
                                    $(this).css('height', newH + 'px');
                                }
                                else {
                                    $(this).css('width', newW + 'px');
                                    $(this).css('height', 'auto');
                                }

                            }
                            else  {
                                $(this).css('width', iw + 'px');
                                $(this).css('height', 'auto');
                            }

                            var padW = ($(window).width() - $(this).outerWidth()) / 2, 
                            padH = ($(window).height() - $(this).outerHeight()) / 2;
                            console.log (padH + ' ' + padW);
                                $(this).css('top', padH);
                              $(this).css('left', padW);

                            if($('#overlay').is(":visible") == true) {
                                ih = ih + 4;
                                $('<div id="xButton">x</div>').appendTo('#modalImage');
                                if (padH >= 0) {
                                    $('#xButton').css('top', padH - 4).css('right', padW - 65);
                                }
                                else {
                                    $('#xButton').css('top', '20px').css('right', padW - 65);
                                }
                            }
                        });

                    }).attr('src', id);
                });
                $('#xButton').click(function(){
                    $(this).hide();
                    $('#overlay').fadeOut(function(){
                        $('#modalImage img').css('top', '-9999px').remove();
                        $('#xButton').remove();
                        $('#modalImage').addClass('loader');
                    });
                });
            });

Answer 1

如果你动态设置一个元素，你需要绑定一个监听器，最简单的方法是使用jquery live（）函数：

http://api.jquery.com/live/

Answer 2

看起来xButton是在及时附加点击后创建的。如果你打算这样做，你需要确保在实际创建xButton之后设置xButton.click，而不是之前。或者，您可以使用文档中描述的live或delegate方法。

为什么.click（）在这个实例中不起作用？

2 个答案: