管理div行內動態生成的元素的onclick事件

Question

在我的Odoo模塊中，我使用qweb生成了一個行div，其中可以包含復選框，texarea，輸入等不同元素。

當我從數據庫加載數據時。 我知道元素行的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，以根據此規則id=row_id + name_of_view更改row內的元素。

現在，我有這個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

讓我知道這是否有幫助，或者您需要了解其他任何信息