在同一页面上用两个表单收听提交事件

Question

I'm creating a Javascript widget that generate a form , let's call it #widget-form created like this:

<form autocomplete="off" id="widget-form">
    <!-- Some inputs -->
</form>

I'm listening on submit event like this:

document.getElementById('widget-form').addEventListener('submit', function(event) {
    debugger;
}

And everything works fine.

BUT, when the widget is present on my Rails app webpage containing an another form (generated by simple_form ), the Javascript is unable to catch my #widget-form submission event (my Chrome console don't breakpoint on debugger; )

PS: The page just reload when I submit my #widget-form form.

Is there a way to catch this event even if there is another form on the same webpage?

Answer 1

好的找到了问题，我的错，这两个表单具有相同的 ID ，这就是为什么我的事件没有被这个函数捕获的原因。