jquery odoo 中的点击事件功能不起作用

Question

我正在尝试使用下面的 jquery 代码对我的前视图执行一些动态更改，以使 odoo 开关切换到像收音机一样的行为 button.so 它可以像单选按钮一样一次选择一个

注意：console.log("test") 正在运行，但带有 css 选择器的代码不起作用

请指导我如何运行让我的脚本正常工作

 $(document).ready(function(){
        $(".wk_checked_question").click(function(){
            alert("you click me!");
          
        });
        console.log("test");
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
*test.html**

     <tbody>
       <tr>
         <td class="question_id" style="width:70%">Q1.  t-shirt coler 
            size</td>
            <td class="question_id" style="width:50%">$ 120.00</td>
            <td><label class="switch">
            input class="wk_checked_question" data-id="2" type="checkbox">
            <span class="check_box round"></span>
            </label>
          </td>
       </tr>
        <tr>
        <td class="question_id" style="width:70%">Q2.  t-shirt size</td>
        <td class="question_id" style="width:50%"> Free</td>
        <td>
          <label class="switch">
           <input class="wk_checked_question" data-id="1" type="checkbox">
           <span class="check_box round"></span>
          </label>
        </td>
           </tr>
         </tbody>

Answer 1

也许这就是您要找的：

$(document).ready(function(){
   $("body").on("click",".wk_checked_question",function(ev){
      $(".wk_checked_question").each((i,cb)=>cb.checked=(cb==this));
      this.checked=true; // a "real" radio button cannot be unchecked ...
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:500px">
 <tbody>
   <tr>
      <td class="question_id" style="width:70%">Q1.  t-shirt color size</td>
      <td class="question_id" style="width:50%">$ 120.00</td>
      <td><label class="switch"><input class="wk_checked_question" data-id="2" type="checkbox">
         <span class="check_box round"></span></label></td>
   </tr>
   <tr>
     <td class="question_id" style="width:70%">Q2.  t-shirt size</td>
     <td class="question_id" style="width:50%"> Free</td>
     <td>
       <label class="switch">
        <input class="wk_checked_question" data-id="1" type="checkbox">
        <span class="check_box round"></span></label></td>
   </tr>
 </tbody>
</table>

单击复选框后，.each() 循环遍历所有具有相同 class 的复选框，并仅设置与单击的 ono (this) 相同的复选框。其他的都没有勾选。

我按照 @freedomn-m 的评论中的建议，将“委托事件附件”与 jQuery.on() 一起使用。这样做的好处是它可以处理在事件附加时甚至不存在的目标元素 (.wk_checked_question)。

您的 HTML 也缺少我添加的 <tbody> 周围的 <table> 标签。

编辑

回到这个答案，我意识到我可以进一步简化脚本并允许通过使用此选项再次取消选择：

$("body").on("click",".wk_checked_question",function(ev){
 let newstate=this.checked;
 $(".wk_checked_question").prop("checked",false);
 this.checked=newstate
});

jquery odoo 中的点击事件功能不起作用

jquery function on click event in odoo is not working

javascript

jquery

odoo

odoo-11

odoo-12