Javascript .类选择器不工作

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

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

---

怎么了？

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

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

---

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

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

---

在尝试绑定事件处理程序时，元素还没有类目标。从：

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

从技术上讲，元素是存在的，但是它们还不能被类目标寻址

您有三个选项来解决此问题：

将类添加到HTML标记中。 将类添加到元素后绑定处理程序。 使用 前两个并不适合您的用例，因为您正在添加类目标以响应其他事件，并且类目标的元素数量随着时间的推移而变化。这是事件委派的一个很好的用例：

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

---

在您尝试绑定事件处理程序时，元素还没有类目标。从：

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

从技术上讲，元素是存在的，但是它们还不能被类目标寻址

您有三个选项来解决此问题：

将类添加到HTML标记中。 将类添加到元素后绑定处理程序。 使用 前两个并不适合您的用例，因为您正在添加类目标以响应其他事件，并且类目标的元素数量随着时间的推移而变化。这是事件委派的一个很好的用例：

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

---

首先，将函数引用放入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 = $();
});

---

首先，将函数引用放入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 = $();
});

---

$+x中的x是什么？x变量是什么？x是代码顶部定义的变量。当玩家点击一张卡时，它会将x设置为卡id。试试@Rory McCrossan。目标类是通过JS设置的。x在$+x中是什么？x变量是什么？x是代码顶部定义的变量。当玩家点击一张卡时，它会将x设置为卡id。试试@Rory McCrossan，目标类是通过JSI设置的，我觉得这也很奇怪，但它只是将函数设置为就绪处理程序，这在JSFIDLE加载处理程序包装器之外是有意义的。我觉得这也很奇怪，但它只是将函数设置为就绪处理程序，这在JSFIDLE加载处理程序包装器之外是有意义的。它确实解决了这个问题。非常感谢。它确实解决了这个问题。非常感谢。谢谢你的建议。