javascript - 为什么此代码无法执行？更新内部文本与替换整个标签

有人可以解释为什么此代码无法正常工作。如果快速单击猫，它将冻结浏览器。

    render: function(catName){
                var cat = controller.getCat(catName);
                var displayArea = $('#displayArea');
                var catImage = $('#catImage');
                var num = $('#numClicks');
                // the two lines below are not performant
                catImage.attr('src', cat.url);
                num.text(cat.numClicks);
                // the three lines below can replace the two lines above and they work. Why?
                //displayArea.empty();
                //displayArea.append('<img src=\"' + cat.url + '\"' + '</img>');
                //displayArea.append('<p>' + cat.numClicks + '</p>');
                $("#displayArea img").click(function(){
                    cat.numClicks++;
                    controller.updateClicks(cat.name, cat.numClicks);
                    view.render(cat.name);
                });

    }

这是jsfiddle：https://jsfiddle.net/ryangittens/fo2g24dp/1/

最佳答案

您一直在重新挂钩click事件。更改src的img不会取消处理程序的挂钩。 （请注意，我部分地基于注释掉的代码假设#catImage在#displayArea内部。）

只需将click钩在$("#displayArea img")上一次。