javascript - .class 选择器不起作用

Question

我在一个纸牌游戏系统中工作，玩家可以通过点击它来选择卡片，然后选择放置它的位置。我的问题是当玩家点击目标位置时，什么也没有发生。
这是我的尝试： http: //jsfiddle.net/5qMHz/
这是我的代码：

function target() {
 $(".target").on("click", function() {
     $("#"+x).appendTo(this);
     console.log(x);     
 });
};

怎么了？

Answer 1

target尝试与文档绑定，因为您在文档准备期间更改了类，并且该类最初没有元素

  $(document).on("click",".target", function() {
   $("#" + x).appendTo(this);
   console.log(x);
  }

工作小提琴

Answer 2

首先，您将函数引用放入 jQuery 对象的做法很奇怪。然而问题在于，因为.target类是在 DOM 加载之后应用的，所以您需要使用委托选择器。尝试这个：

var $card

$(".card").on("click", function () {
    $card = $(this);

    if ($(".myslot").length) {
        if ($(".myslot").is(':empty')) {
            $(".myslot:empty").addClass("target");
        } else {
            alert('No empty slots');
        }
    }
});

$('.field').on('click', ".target", function () {
    $card.appendTo(this);
    $card = $();
});

示例小提琴

Answer 3

在您尝试绑定事件处理程序的那一刻，元素还没有类target。从文档中：

事件处理程序仅绑定到当前选定的元素；当您的代码调用.on().

（从技术上讲，这些元素存在，但它们（还）不能被类寻址target）

你有三个选项来解决这个问题：

1. 将类添加到您的 HTML 标记中。
2. 将类添加到元素后绑定处理程序。
3. 使用事件委托。

前两个并不真正适合您的用例，因为您正在添加类target以响应其他事件，并且该类的元素数量target随时间而变化。这是事件委托的一个很好的用例：

$('.field').on('click', '.target', function() {
   // ...
});