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

WORKING FIDDLE

Answer 2

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

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 = $();
});

Example fiddle

Answer 3

当您尝试绑定事件处理程序时，元素还没有类target。来自documentation：

事件处理程序仅绑定到当前选定的元素;在您的代码调用.on()时，它们必须存在于页面上。

（从技术上讲，元素存在，但它们（尚未）可由类target寻址

您有三种方法可以解决这个问题：

将类添加到HTML标记中。
在中将类添加到元素后绑定处理程序。

使用event delegation。

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

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

.class选择器不工作

3 个答案: