How get clicked id when clicked element in modal window?

Question

I am beginner web developer. I have code to dynamic load data to iframe:

$(document).ready(function () {
    function loadMaterials(type, query) {
        $.ajax({
            type: 'GET',
            url: '/getMaterials',
            dataType: "text",
            data: {
                query: query,
                type: type,
            },
            success: function (data) {
                $('.dynamic-materials').html(data);
            }
        });
    }



    $('.product-material-front').on('show.bs.select', function () {
        $('.product-query-string-body').val('');
        loadMaterials(2, "");
        $('.select-material-title').html('MateriaĹ frontu')
        $('.material-type-input').val(2);
        $('#material-dialog-modal').modal('show');
    });

    $('.product-material-body').on('show.bs.select', function () {
        $('.product-query-string-body').val('');
        loadMaterials(1, "");
        $('.select-material-title').html('MateriaĹ korpusu');
        $('.material-type-input').val(1);
        $('#material-dialog-modal').modal('show');
    });
});

<div id="material-dialog-modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body pt-0">
                    <h3 class="select-material-title px-3"></h3>
                    <form method="get" action="{{ route('frontend.get.materials') }}" class="px-3 select-material-url">
                        <input type="hidden" name="type" value="" class="material-type-input">
                        <div class="inner-addon rounded-0 modal-search-form">
                            <i class="fa fa-search"></i>
                            <input type="text" class="form-control product-query-string-body"
                                   placeholder="Szukaj produktu"
                                   aria-label="Wpisz nazwę lub kod koloru"/>
                        </div>
                    </form>
                    <div class="row material-list px-5 pt-4 dynamic-materials">

                    </div>
                </div>
            </div>

        </div>
    </div>

It's work fine.

I need to change the classes of the clicked elements. Additionally, I want to select select with the option selected.

I made a code like this:

$('.select-material-body').on('click', function(e){ console.log('ok');
        if($('.material-type-input').val() == 1){
            $(".select-material").removeClass("selected-material");
            $(this).addClass("selected-material");
            $('select[name=product-material-body]').val($(this).attr('id'));
            $('.product-material-body').selectpicker('refresh');
            $('#material-dialog-modal').modal('hide');
        } else{
            $(".select-material").removeClass("selected-material");
            $(this).addClass("selected-material");
            $('select[name=product-material-front]').val($(this).attr('id'));
            $('.product-material-front').selectpicker('refresh');
            $('#material-dialog-modal').modal('hide');
        }
    });

But unfortunately it doesn't work :( How can i repair it?

My preview: http://serwer1356363.home.pl/_nauka/ - popup is visible after click select (with icon)

Please help me..

Answer 1

Since the modal content isn't append on the document, you can't bind event to it.
Instead, you can add an on() event to the body, passing your sub-selector :

 $('body').on('click', '.select-material-body', function(e) { console.log('ok'); });