Question

有人可以解释为什么这段代码不起作用。如果您快速点击猫，它会冻结浏览器。

    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/

Answer 1

您经常重新 - 摘取click事件。更改src的{{1}}并未取消处理程序。（请注意，我假设，部分基于已注释掉的代码，img #catImage内的。）

只需#displayArea 挂上click 。

Answer 2

这是因为每次调用render时都会添加点击事件。

试

$("#displayArea img").off('click',).on('click', function(){
  cat.numClicks++;
  controller.updateClicks(cat.name, cat.numClicks);
  view.render(cat.name);
});

这将删除以前绑定的事件

为什么这段代码性能不佳？更新内部文本与替换整个标记

2 个答案: