dropdown () работает только один раз при начальной загрузке данных

Question

Я пытаюсь остановить распространение события строки таблицы, не мешая переключению меню кнопки td, и не могу понять это.

Вот мой код тела таблицы (проходящий из другого файла):

<tr data-toggle="ajax-modal" data-target="#editUser" data-url="@Url.Action("EditUser", new {Id = Model.Id})" asp-action="EditUser" asp-controller="Administration" asp-route-id="@Model.Id">
    <td class="text-left d-none">@Model.Id</td>
    <td class="text-left">@Model.UserName</td>
    <td class="text-left">@Model.Email>
    <td class="text-left">@Model.PhoneNumber</td>
    <td class="text-left">@Model.City</td>
    <td>
        <button type="button" id="btnOpen" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="myButton btnRed dropdown-toggle">
            <i class="glyphicon glyphicon-remove-circle"></i>
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" title="cancel">Cancel</a>
            <a class="dropdown-item" title="delete">Delete</a>
        </div>
    </td>
</tr>

Я пробовал:

Это:

$('button').click(function (e) {
    e.stopPropagation();
});

Это:

$('.myButton').click(function (e) {
    e.stopPropagation();
    var x = document.getElementById("btnOpen").getAttribute("aria-expanded");
    if (x == "true") {
        x = "false"
    } else {
        x = "true"
    }
    document.getElementById("btnOpen").setAttribute("aria-expanded", x);
    $('#dropdownBtn').addClass('show');
});

и просто:

pointer-events: none;"

Это самая близкая вещь, с которой я работаю ;однако, событие .dropdown () покажет меню только после 2-го щелчка, затем оно будет отображаться нормально. (Таким образом, вы нажимаете кнопку «Удалить» один раз, меню не отображается. После этого оно работает при следующем нажатии, даже на кнопках удаления в другом ряду)

$('.myButton').click( function (event) {
    event.preventDefault();
    event.stopPropagation();
    $('.myButton').dropdown();
});