Управление событием onclick элемента, динамически генерируемого внутри строк div - PullRequest
0 голосов
/ 07 июня 2018

В моем модуле Odoo я генерирую с помощью qweb строки div, которые могут содержать различные элементы, такие как флажки, texarea, ввод и т. Д.

Когда я загружаю данные из БД.Я знаю идентификатор строки элемента и назначаю его для строки 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 Я установил динамический идентификатор для изменения элементов внутри row, следуя этому правилу id=row_id + name_of_view.

Пока у меня естьэта функция jQuery, которая перехватывает щелчок пользователя и возвращает идентификатор строки, по которой щелкнули:

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

Но мне нужно проверить все элементы внутри div и проверить, изменил ли пользователь что-либо.

Я хотел бы знать, если пользователь, например, установит флажок внутри строки div с идентификатором 1. Итак, у меня есть row=1 и checkbox id = 1answer_yes_type .... и я хотел бы знать, нажал ли пользователь идентификатор id 1answer_yes_type.... или элемент 1answer_value и т. д. *

Как мне это сделать?

1 Ответ

0 голосов
/ 07 июня 2018

Вот, пожалуйста:

 $(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

дайте мне знать, если это поможет, или вам нужнознать что-то еще

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...