JQuery Onclick event.target 返回错误的元素

Question

我正在尝试打印我用 class piece 单击的目标的 ID。这是 JavaScript.

function attachClickHandlers() {
  $('.piece').click(function(event) {
    console.log(event.target.id)
  })
}

attachClickHandlers();

HTML:


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="full-board">
      <div id="pieces">
        <img src="assets/w_r.svg" id="w_r1" class="piece">
        <img src="assets/w_n.svg" id="w_n1" class="piece">
        <img src="assets/w_b.svg" id="w_b1" class="piece">
        <img src="assets/w_q.svg" id="w_q" class="piece">
        <img src="assets/w_k.svg" id="w_k" class="piece">
        <img src="assets/w_b.svg" id="w_b2" class="piece">
        <img src="assets/w_n.svg" id="w_n2" class="piece">
        <img src="assets/w_r.svg" id="w_r2" class="piece">

        <img src="assets/w_p.svg" id="w_p1" class="piece">
        <img src="assets/w_p.svg" id="w_p2" class="piece">
        <img src="assets/w_p.svg" id="w_p3" class="piece">
        <img src="assets/w_p.svg" id="w_p4" class="piece">
        <img src="assets/w_p.svg" id="w_p5" class="piece">
        <img src="assets/w_p.svg" id="w_p6" class="piece">
        <img src="assets/w_p.svg" id="w_p7" class="piece">
        <img src="assets/w_p.svg" id="w_p8" class="piece">

        <img src="assets/b_r.svg" id="b_r1" class="piece">
        <img src="assets/b_n.svg" id="b_n1" class="piece">
        <img src="assets/b_b.svg" id="b_b1" class="piece">
        <img src="assets/b_q.svg" id="b_q" class="piece">
        <img src="assets/b_k.svg" id="b_k" class="piece">
        <img src="assets/b_b.svg" id="b_b2" class="piece">
        <img src="assets/b_n.svg" id="b_n2" class="piece">
        <img src="assets/b_r.svg" id="b_r2" class="piece">

        <img src="assets/b_p.svg" id="b_p1" class="piece">
        <img src="assets/b_p.svg" id="b_p2" class="piece">
        <img src="assets/b_p.svg" id="b_p3" class="piece">
        <img src="assets/b_p.svg" id="b_p4" class="piece">
        <img src="assets/b_p.svg" id="b_p5" class="piece">
        <img src="assets/b_p.svg" id="b_p6" class="piece">
        <img src="assets/b_p.svg" id="b_p7" class="piece">
        <img src="assets/b_p.svg" id="b_p8" class="piece">
      </div>

但是，如果我单击第一行（棋子）上的任何白色棋子，它会打印 w_p8，如果我单击第二行上的任何白色棋子，它会打印 w_r2。

我做错了什么？

编辑：它对大多数尝试过它的人都有效，所以它可能是我代码中的其他内容。抱歉，我一开始没有包含它，我认为其他任何东西都不会产生太大影响我设法在 JSFiddle 上重现了这个问题：https://jsfiddle.net/chy86fbq/

Answer 1

你说：

I'm trying to print the id of the target that I click on with the class "piece" whose name also includes "w".

可能你指的不是名字 id。所以你需要检查 id includes w 是否然后记录它。另请注意，您错过了结束 div 标记。

更新

根据您关于共享整个代码的评论 (https://jsfiddle.net/chy86fbq/)，您正在使用 position = 'absolute' 并且未设置 left 和 top。您需要为 piece class.

设置 left 和 top 而不是设置 paddingLeft 和 paddingTop

   console.clear();
   attachClickHandlers();
        function attachClickHandlers() {
            $('.piece').click(function (event) {
                if (event.target.id.includes("w"))
                    console.log(event.target.id)
            })
        }

 img {
            display: inline-block;
            width: 50px;
            height: 50px;
            outline: 1px solid black;
        }

       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <div id="full-board">
        <div id="pieces">
            <img src="assets/w_r.svg" alt="w_r1" id="w_r1" class="piece">
            <img src="assets/w_n.svg" alt="w_n1" id="w_n1" class="piece">
            <img src="assets/w_b.svg" alt="w_b1" id="w_b1" class="piece">
            <img src="assets/w_q.svg" alt="w_q" id="w_q" class="piece">
            <img src="assets/w_k.svg" alt="w_k" id="w_k" class="piece">
            <img src="assets/w_b.svg" alt="w_b2" id="w_b2" class="piece">
            <img src="assets/w_n.svg" alt="w_n2" id="w_n2" class="piece">
            <img src="assets/w_r.svg" alt="w_r2" id="w_r2" class="piece">

            <img src="assets/w_p.svg" alt="w_p1" id="w_p1" class="piece">
            <img src="assets/w_p.svg" alt="w_p2" id="w_p2" class="piece">
            <img src="assets/w_p.svg" alt="w_p3" id="w_p3" class="piece">
            <img src="assets/w_p.svg" alt="w_p4" id="w_p4" class="piece">
            <img src="assets/w_p.svg" alt="w_p5" id="w_p5" class="piece">
            <img src="assets/w_p.svg" alt="w_p6" id="w_p6" class="piece">
            <img src="assets/w_p.svg" alt="w_p7" id="w_p7" class="piece">
            <img src="assets/w_p.svg" alt="w_p8" id="w_p8" class="piece">

            <img src="assets/b_r.svg" alt="b_r1" id="b_r1" class="piece">
            <img src="assets/b_n.svg" alt="b_n1" id="b_n1" class="piece">
            <img src="assets/b_b.svg" alt="b_b1" id="b_b1" class="piece">
            <img src="assets/b_q.svg" alt="b_q" id="b_q" class="piece">
            <img src="assets/b_k.svg" alt="b_k" id="b_k" class="piece">
            <img src="assets/b_b.svg" alt="b_b2" id="b_b2" class="piece">
            <img src="assets/b_n.svg" alt="b_n2" id="b_n2" class="piece">
            <img src="assets/b_r.svg" alt="b_r2" id="b_r2" class="piece">

            <img src="assets/b_p.svg" alt="b_p1" id="b_p1" class="piece">
            <img src="assets/b_p.svg" alt="b_p2" id="b_p2" class="piece">
            <img src="assets/b_p.svg" alt="b_p3" id="b_p3" class="piece">
            <img src="assets/b_p.svg" alt="b_p4" id="b_p4" class="piece">
            <img src="assets/b_p.svg" alt="b_p5" id="b_p5" class="piece">
            <img src="assets/b_p.svg" alt="b_p6" id="b_p6" class="piece">
            <img src="assets/b_p.svg" alt="b_p7" id="b_p7" class="piece">
            <img src="assets/b_p.svg" alt="b_p8" id="b_p8" class="piece">
        </div>
    </div>

Answer 2

函数attachClickHandlers需要在document.ready中初始化，并检查w，请按照下面的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
   <div id="full-board">
      <div id="pieces">
         <img src="assets/w_r.svg" id="w_r1" class="piece">
         <img src="assets/w_n.svg" id="w_n1" class="piece">
         <img src="assets/w_b.svg" id="w_b1" class="piece">
         <img src="assets/w_q.svg" id="w_q" class="piece">
         <img src="assets/w_k.svg" id="w_k" class="piece">
         <img src="assets/w_b.svg" id="w_b2" class="piece">
         <img src="assets/w_n.svg" id="w_n2" class="piece">
         <img src="assets/w_r.svg" id="w_r2" class="piece">
         <img src="assets/w_p.svg" id="w_p1" class="piece">
         <img src="assets/w_p.svg" id="w_p2" class="piece">
         <img src="assets/w_p.svg" id="w_p3" class="piece">
         <img src="assets/w_p.svg" id="w_p4" class="piece">
         <img src="assets/w_p.svg" id="w_p5" class="piece">
         <img src="assets/w_p.svg" id="w_p6" class="piece">
         <img src="assets/w_p.svg" id="w_p7" class="piece">
         <img src="assets/w_p.svg" id="w_p8" class="piece">
         <img src="assets/b_r.svg" id="b_r1" class="piece">
         <img src="assets/b_n.svg" id="b_n1" class="piece">
         <img src="assets/b_b.svg" id="b_b1" class="piece">
         <img src="assets/b_q.svg" id="b_q" class="piece">
         <img src="assets/b_k.svg" id="b_k" class="piece">
         <img src="assets/b_b.svg" id="b_b2" class="piece">
         <img src="assets/b_n.svg" id="b_n2" class="piece">
         <img src="assets/b_r.svg" id="b_r2" class="piece">
         <img src="assets/b_p.svg" id="b_p1" class="piece">
         <img src="assets/b_p.svg" id="b_p2" class="piece">
         <img src="assets/b_p.svg" id="b_p3" class="piece">
         <img src="assets/b_p.svg" id="b_p4" class="piece">
         <img src="assets/b_p.svg" id="b_p5" class="piece">
         <img src="assets/b_p.svg" id="b_p6" class="piece">
         <img src="assets/b_p.svg" id="b_p7" class="piece">
         <img src="assets/b_p.svg" id="b_p8" class="piece">
      </div>
   </div>
</body>
<script>
   function attachClickHandlers() {
             $('.piece').click(function(event) {
   
              console.log("event.target.id.includes('w')" +event.target.id.includes("w"));
   console.log("event.target.id" +event.target.id);
          });
          }
            $( document ).ready(function() {
     attachClickHandlers();
   });
       
</script>

参考 - https://api.jquery.com/ready/ , https://api.jquery.com/contains-selector/ , https://www.w3schools.com/jsref/jsref_includes.asp

问候黑暗

JQuery Onclick event.target 返回错误的元素

JQuery Onclick event.target Returning Wrong Element

javascript

jquery

onclicklistener