jQuery показывает элемент не работает должным образом в MVC

Question

Я добавил jQuery версии 3.4.1 в основное представление Layout в MVC, и у меня есть другое представление под названием Register со следующим простым кодом javascript:

<script src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        $('#btnRegister').click(function () {
            $('#successModal').modal('show');
        })
    });
</script>

Но нажав btnRegister не стреляет в браузере.

Это происходит по какой-то причине из-за представления Layout. Чтобы проверить это условие, когда я исключил представление Layout из представления Register и добавил jQuery v3.4.1 в представление Register, этот код начал работать, как и ожидалось.

Я очень уверен, что никакая другая библиотека javaScript не используется ни для представлений Layout, ни для Register, кроме указанных двух библиотек (jQuery v3.4.1 & bootstrap.min.js). Для тех, кто хочет взглянуть на растянутую разметку в браузере, я вставил источник страницы здесь (https://pastebin.com/U3n3XCbh).

Answer 1

Исходя из заданной вами разметки, есть два элемента с btnRegister id.

<li id="registerLi">
    <a href="/Account/Login" id="btnRegister">
        <img src="/ximages/key.png" alt="register.png" />
        <span>Login / Register</span>
    </a>
</li>

И

<input id="btnRegister" class="btn btn-success" type="button" value="Register" />

Только 1 элемент будет связан сщелкните обработчик события, который вы зарегистрировали, и это элемент a.

Ответ Умаира Анваара - это решение проблемы, но на странице должны быть уникальные идентификаторы элементов.

Answer 2

Попробуйте зарегистрировать событие клика по щелчку тела и отфильтровать этот щелчок по идентификатору кнопки.

$(document).ready(function () {
    $('body').on('click', '#btnRegister', function () {
        $('#successModal').modal('show');
    })
});