Call a modal window and determine the contents of the first cell when clicking on a table row?

Question

JavaScript

There is such a table

<table>
<tr><td>7</td><td>a</td><td>b</td><td>c</td>d</tr>
<tr><td>8</td><td>a</td><td>b</td><td>c</td>d</tr>
</table>

And there is such a code that when you click on a table row, it should display a window with the contents of the cell of the first row of the table.
Why then if you do not use interrupt

show.bs.modal  $(document).on('show.bs.modal','#myModal', function () { }

works perfectly, and when you shove it into an interrupt handler, it gives out more numbers in the console with each click. For example 1 click = 7, second click 77, third click 777. What is it?

$(document).on('show.bs.modal','#myModal', function () {

    $('table tr').click(function(){
        
        rur= $(this.cells[0]).text();
         console.log(rur);
            });

});

Answer 1

https://codepen.io/Art_Corp/pen/aYdQOe
right?

Answer 2

It looks like something is wrong.
This is how
$(document).ready(function(){
$('table tr').click(function(){
alert($(this.cells[0]).text());
});
} );
And when I attach it to the show.bs.modal interrupt handler:
(From the bootstrap modal window)
It starts to get weird, with each click increasing the number of digits in the console
$(document).on('show.bs.modal','#myModal' , function () {
$('table tr').click(function(){
rur= $(this.cells[0]).text();
console.log(rur);
});
});
I think I explained it well, but apparently I won’t find the answer myself, I will go the other way - do not use the bootstrap modal window