jQuery not preventing default form submission on multiple buttons with same class
I'm optimizing some code but I'm trying to debug I'm working with an scenario where I have a form with multiple submit buttons that share the same class, and I'm trying to prevent the default form submission behavior for all of them using jQuery, but it only works on the first button clicked... I have the following code: ```javascript $(document).ready(function() { $('.submit-btn').on('click', function(event) { event.preventDefault(); console.log('Button clicked!'); // Add additional logic here }); }); ``` The question is that when I click on the second button, the form still submits instead of executing the event handler. I'm using jQuery version 3.6.0, and here's my HTML structure: ```html <form id='myForm'> <input type='text' name='inputField' /> <button type='submit' class='submit-btn'>Submit 1</button> <button type='submit' class='submit-btn'>Submit 2</button> </form> ``` I've tried using `stopImmediatePropagation()` inside the click event, but that didn’t resolve the scenario. Could it be that the buttons being of type 'submit' is causing the form to submit anyway? Also, I'm not seeing any behavior messages in the console. Any suggestions on how to properly prevent the default form submission for all buttons? I've been using Javascript for about a year now. I appreciate any insights! The stack includes Javascript and several other technologies. Thanks in advance! For context: I'm using Javascript on Ubuntu 20.04. Could this be a known issue?