Question

嘿，我有这条jQuery / Javascript：

$(document).ready(function() {
                var points = 0;
                var iterations = 10;
                var winWidth = $(window).width();
                var winHeight = $(window).height();

                setInterval(function() {
                    if (iterations > 0) {
                        var rndX = Math.ceil(Math.random() * winWidth);
                        var rndY = Math.ceil(Math.random() * winHeight);
                        $('div.item').remove();
                        $('body').append('<div class="item" style="left: '+rndX+'px; top: '+rndY+'px;"></div>');
                        iterations--;
                    } else {
                        location.href = "http://www.google.com/";
                        $('*').remove();
                    }
                }, 1750);

                $('div.item').click(function() {
                    $(this).remove();
                    points = points + 1;
                    $('#points').val(points);
                    return false;
                });

            });

但由于某种原因，$('div.item').click(function()没有启动:(

有什么想法吗？

Answer 1

不使用“click”，而是使用“delegate”：

$('body').delegate('div.item', 'click', function() {
  $(this).remove();
  points = points + 1;
  $('#points').val(points);
  return false;
});

当您的间隔处理程序代码从文档中删除所有“div.item”元素时，这也将删除您建立的处理程序。通过使用“委托”，您只需在<body>元素上放置一个处理程序，它利用事件冒泡来处理所有点击。来自与“div.item”选择器匹配的元素的那些将使用您的代码处理，就像处理程序已直接绑定到元素一样。

因为“委托”机制在事件实际发生时应用选择器，所以自首次接收页面以来该目标元素是否存在或者是否仅动态添加该元素并不重要（如下所示）你的代码）。

Answer 2

当您尝试将点击功能绑定到元素时，您的div不存在...

您需要提前绑定它们（动态）。请参阅.live()和.delegate()

Answer 3

我建议使用JQuery的.live方法，原因与Pointy类似。

Live会在元素创建时绑定它们。

$('div.item').live('click', function() {
             $(this).remove();
             points = points + 1;
             $('#points').val(points);
             return false;
          });

jQuery .click（）不使用setInterval

3 个答案: