管理在div行内动态生成的元素的onclick事件

Question

在我的Odoo模块中，我使用qweb生成一个行div，它可以包含复选框，texarea，输入等不同的元素。

当我从DB加载数据时。我知道元素行的id并将其分配给可以包含元素的div行。

我需要知道用户何时点击精确div行中的某个输入。

码：

                   <!-- Load the section lines of the section_ids choosed-->
                    <t t-foreach="checklist_lines" t-as="check_line">
                        <div class="row section_line" t-att-id="check_line.id" style="border-top: 1px solid black; padding:2px;">

                            <div class="col-xs-12 col-sm-4 col-md-4">
                                <span t-esc="check_line.name"/>
                            </div>
                            <t t-if="check_line.answer_yes_type">
                                <div class="col-xs-12 col-sm-1 col-md-1" style="display:inline;">
                                    <!-- TODO if yes is true check if have subsections and load it-->
                                    <input type="checkbox"
                                           t-att-id="str(check_line.id) + 'answer_yes_type'"
                                           t-att-name="str(check_line.id) + 'answer_yes_type'"
                                           t-att-value="check_line.answer_yes"
                                           style="margin:10px;">Yes
                                    </input>
                                </div>
                            </t>
                            <t t-if="check_line.answer_no_type">
                                <div class="col-xs-12 col-sm-1 col-md-1">

                                    <input type="checkbox"
                                           t-att-value="check_line.answer_no"
                                           style="margin:10px;">No
                                    </input>

                                </div>
                            </t>
                            <t t-if="check_line.answer_undecided_type">
                                <div class="col-xs-12 col-sm-2 col-md-2">

                                    <input type="checkbox"
                                           t-att-value="check_line.answer_undecided"
                                           style="margin:10px;">Undecided
                                    </input>

                                </div>
                            </t>
                            <t t-if="check_line.answer_text_type">
                                <div class="col-xs-12 col-sm-4 col-md-4">
                                    <textarea type="text"
                                              t-att-value="check_line.answer_text"
                                              style="margin:10px; width:100%; height:100px;"
                                    />
                                </div>
                            </t>
                            <t t-if="check_line.answer_value_type">
                                <div class="col-xs-12 col-sm-1 col-md-1">
                                    <input type="text"
                                           t-att-value="check_line.answer_value"
                                           style="margin:10px;"
                                    />
                                    <t t-if="check_line.answer_value_uom_id">
                                        <span t-esc="check_line.answer_value_uom_id.name"/>
                                    </t>
                                </div>
                            </t>
                            <t t-if="check_line.order_id">
                                <div class="col-xs-12 col-sm-1 col-md-1">
                                    <a t-attf-href="/my/orders/{{check_line.order_id.id}}?{{keep_query()}}">
                                        <span t-esc="check_line.order_id.name"/>
                                    </a>
                                </div>
                            </t>

                        </div>
                        <br/>
                    </t>

使用t-att-name和t-att-id我设置了一个动态id来改变row中的元素遵循这个规则id=row_id + name_of_view。

现在，我有这个jQuery函数拦截用户点击并返回被点击的行的id：

jQuery(document).ready(function () {
        $('.section_line').on("click", function () {
            var checklist_line_id = $(this).attr('id');
            alert(checklist_line_id);
        });
    });

但就像我需要检查div中的所有元素并检查用户是否更改了某些内容。

我想知道用户是否例如单击id为1的div行内的复选框。所以我有row=1和checkbox id = 1answer_yes_type ....我想知道用户是否点击了id 1answer_yes_type ....或者元素1answer_value等......

我该如何管理？

Answer 1

干得好 ：

 $(document).ready(function () {
    $('.clicked').find("div").on("click", function(){
      var id = $(this).attr('id');
     var valueofcheckbox = $(this).find('input')[0].value;
    var textofcheckbox = $(this).first().text();
    alert('div id: '+ id + ' checkbox value: '+ 
       valueofcheckbox + ' text of checkbox: ' +textofcheckbox);
       })
   });

工作环节：

https://codepen.io/sidhanshu28/pen/MXjVzo

让我知道这是否有帮助，或者您需要了解其他任何事情