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);
                });

    }

render:function（catName）{
var cat=controller.getCat（catName）；
var displayArea=$（“#displayArea”）；
var catImage=$（“#catImage”）；
var num=$（'numClicks'）；
//下面的两行没有执行
catImage.attr（'src'，cat.url）；
num.text（cat.numClicks）；
//下面的三行可以代替上面的两行，为什么？
//displayArea.empty（）；
//displayArea.append（“”）；
//displayArea.append（“”+cat.numClicks+”
）；
$（“#显示区域img”）。单击（函数（）{
cat.numClicks++；
controller.updateClicks（cat.name，cat.numClicks）；
view.render（类别名称）；
});
}

---

下面是jsfiddle:

您不断地重新-挂接

单击
事件。更改
img
的
src
不会解除处理程序的挂钩。（注意，部分基于注释掉的代码，我假设
#catImage
位于
#displayArea
内）

只需钩住
单击
$（“#显示区域img”）
一次，这是因为每次调用
渲染时都会添加一个单击事件

试一试

这将删除以前绑定的事件，其中是相对于
#displayArea
，这是有意义的。谢谢。或者您可以将单击事件移到渲染函数之外。我最终将其移到了渲染函数之外，但这很有用，而且可能会更快地实现。
$("#displayArea img").off('click',).on('click', function(){
  cat.numClicks++;
  controller.updateClicks(cat.name, cat.numClicks);
  view.render(cat.name);
});