jQuery showing element not working as expected in MVC

Question

I've added jQuery version 3.4.1 on the main Layout view in MVC and I've another view called Register with the following simple javascript code:

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

But clicking btnRegister is not firing in the browser.

This is causing due to the Layout view for some reason. To test this condition, when I excluded the Layout view from the Register view and added jQuery v3.4.1 to the Register view, this code started running as expected.

I've made it very sure that no other javaScript library is used by both Layout and Register views except the given 2 libraries (jQuery v3.4.1 & bootstrap.min.js). For those who want to have a look at the stretched markup in the browser, I've pasted page-source here (https://pastebin.com/U3n3XCbh).

Please tryig with $(document).ready() with because you are using each and element calling separate event. And let me know Your register page include layout or not and your register page reload or loading content using jquery or ajax response? — jishan siddique
– jishan siddique, Commented Oct 9, 2019 at 4:48
Register page is including Layout. Register page is not loading or reloading content using jQuery or AJAX response at this stage. Can you please demonstrate what you meant by trying with $(document).ready(). I'm sorry I couldn't understand it. — mindOverFlow
– mindOverFlow, Commented Oct 9, 2019 at 5:03

Umair Anwaar · Accepted Answer · 2019-10-09 06:03:35Z

1

Try to register click event on body click and filter that click base on button id.

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

answered Oct 9, 2019 at 6:03

Umair Anwaar

1,1469 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mindOverFlow Over a year ago

Thanks. This is working but can you please tell me what was going wrong with my code?

dunli Over a year ago

@mindOverFlow I've added an answer below as to why your code doesn't work and this code does. This answer shows that the click listener is attached to the body element and not on the element with btnRegister id. But the listener will only be called if the selector matches #btnRegister - this is why it works

Umair Anwaar Over a year ago

As @dunli explain only one element will be bound to a click. it is not good to create multiple elements with same ID.

Umair Anwaar Over a year ago

above mention, code is a workaround to register click on the body element and further filtering with button id if there are two-element with the same IDs it will be registered for both of them, there are many ways to register the same handler to multiple elements like by class or name or custom tags, we used this way when we are creating dynamic elements and need to register an event handler for them or elements has with same ids which is rare case.

dunli · Accepted Answer · 2019-10-09 06:34:22Z

1

Based on the markup you've given, there are two element bearing the 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>

And

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

Only 1 element will be bound to the click event handler you registered, and that is the a element.

Umair Anwaar's answer is a fix/workaround to your problem, but you should have unique element ids in a page.

edited Oct 9, 2019 at 6:34

answered Oct 9, 2019 at 6:17

dunli

1,38610 silver badges18 bronze badges

1 Comment

mindOverFlow Over a year ago

Great explanation dunli. Thank you Sir.

Collectives™ on Stack Overflow

jQuery showing element not working as expected in MVC

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related