Вложенные элементы переключения данных

Question

У меня есть вид таблицы, который я генерирую в al oop.

<div class="container agenda" id="test_container">


<div class="agenda-item row v-center border-top border-5 py-2" data-toggle="modal" data-target="#test_1">
    <div class="col-12 col-md-2 font-weight-bold timeslot"><i class="far fa-clock location-icon"></i>09.45-10.15</div>
    <div class="col-12 col-md-3 text-primary">
        <p><strong>First title</strong></p>
    </div>
    <div class="col-12 col-md-6">
        <p class=""><b>Some Text 1</b></p>Some other text 1
    </div>
    <div class="col-12 col-md-1 toggle-collapse"><span class="fas fa-2x fa-plus-circle" data-target="#test_1_collapsible" role="button" aria-expanded="false" aria-controls="test_1_collapsible"></span></div>
</div>

<div id="test_1_collapsible" class="row collapse">
    <div class="col-10 offset-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>


<div class="agenda-item row v-center border-top border-5 py-2" data-toggle="modal" data-target="#test_2">
    <div class="col-12 col-md-2 font-weight-bold timeslot"><i class="far fa-clock location-icon"></i>10.30-11.00</div>
    <div class="col-12 col-md-3 text-primary">
        <p><strong>Second title</strong></p>
    </div>
    <div class="col-12 col-md-6">
        <p class=""><b>Some text 2</b></p>Some other text 2
    </div>
    <div class="col-12 col-md-1 toggle-collapse"><span class="fas fa-2x fa-plus-circle" data-target="#test_2_collapsible" role="button" aria-expanded="false" aria-controls="test_2_collapsible"></span></div>
</div>

<div id="test_2_collapsible" class="row collapse">
    <div class="col-10 offset-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>


<div class="agenda-item row v-center border-top border-5 py-2" data-toggle="modal" data-target="#test_3">
    <div class="col-12 col-md-2 font-weight-bold timeslot"><i class="far fa-clock location-icon"></i>11.15-11.45</div>
    <div class="col-12 col-md-3 text-primary">
        <p><strong>Some title 3</strong></p>
    </div>
    <div class="col-12 col-md-6">
        <p class=""><b>Some text 3</b></p>Some other text 3
    </div>
    <div class="col-12 col-md-1 toggle-collapse"><span class="fas fa-2x fa-plus-circle" data-target="#test_3_collapsible" role="button" aria-expanded="false" aria-controls="test_3_collapsible"></span></div>
</div>

<div id="test_3_collapsible" class="row collapse">
    <div class="col-10 offset-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

</div>

То, что я пытаюсь сделать, это открывать модальный режим всякий раз, когда я нажимаю в любом месте строки div, за исключением случаев, когда я нажимаю на значок плюса. Затем я хочу расширить / свернуть дополнительное разделение с информацией. Я понимаю, что значок плюса попадает под модальный триггер.

Пробовал играть с event.stopPropagation();, но это ни к чему не привело.

Конечно, я мог бы добавить data-toggle друг на друга div вместо родительского, но это создаст мертвое пространство , которое не вызовет модальный режим (вещь, которую я бы предпочел избегать).

Любые идеи о том, как этого добиться ?

РЕДАКТИРОВАТЬ:

Кто-то спросил сценарий:

$(document).ready(function(){

$('.agenda .row').on('click', '.toggle-collapse', function(e){

  var collapse_element = $(e.target.getAttribute('data-target'));

  e.stopPropagation();

  collapse_element.siblings('.collapse').collapse('hide');
  collapse_element.collapse('toggle');

});

С collapse_element.siblings('.collapse').collapse('hide');, достигающим поведения, подобного аккордеонному.

Answer 1

Вы можете использовать event delegation вместо встроенного data attributes, чтобы показать ваш модал, передавая селектор, чтобы исключить дочерний знак плюс строки, это использует JQuery's .on() с event delegation, вы бы хотели чтобы добавить этот скрипт в DOM Ready или если таблица генерируется, как вы говорите, с помощью скрипта, запустите ее после того, как таблица полностью сформирована, или вы можете изменить это, чтобы использовать делегирование для самой таблицы:

$(".row").on('click', ':not(.fa-plus-circle)', function (e) {
     //e.stopPropagation(); Not necessary if you remove the data-toggle="modal" data-target="#example_modal" from your .row element
     // Show dialog
     $('#example_modal').modal('show');
});