jQuery Submit Event Happens Twice

Question

My jQuery submit() event is firing twice, and I don't know why.

I'm using a templating engine to build my HTML dynamically so I end up calling $(document).ready() multiple times, as follows...

<script>
$(document).ready(function() {
    $("form.search input[type='image']").click(function() { $(this).closest('form.search').submit() })
})
</script>

...later...

</script>
$(document).ready(function() {
    # I have put an `unbind('submit')` in here to be sure I have nothing else but this particular function bound to `submit`
    $('form.search').unbind('submit').bind('submit',function(event) {
        event.stopPropagation();
        search_term = $(this).find('input[type=text]').val()
        $new_keyword = $('<li class="filter keyword selected" name="'+search_term+'">'+search_term+'</li>')
        alert('event fired!')
        $("#keywords ul").append($new_keyword)
        do_search_selected()
        return false; // Stop the form from actually submitting
    })
})
</script>

The Form HTML:

<form class="search" method="get" action="/search/">

    <div>
        <input id="searchfield"type="text" name="keywords" value="Search" />
        <input id="searchbutton" type="image" src="{{ media_url }}images/search.png" />
     </div>
</form>

(FYI: When I run this in the Safari console $('form.search').get() I get this [ <form class="search" method="get" action="/search/">…</form> ])

The problem:

When I hit Enter or click the submit button or otherwise trigger the submit event, the event is fired twice. I know this because an <li> is added twice to the dom and the alert appears twice as well.

The culprit:

When I comment out the click event binding in the first $(document).ready call, the event only occurs once, as expected. How can the code in the first be causing the double event trigger?

Is it possible the selector `form.search` is not returning what you expect? — RSG, Mar 29 '11 at 03:23
Also post the button code that this is bound to. If you have a sample page you might put a link to that as well. — NotMe, Mar 29 '11 at 03:24
Is the submit for the form bound to the submit button and/or to the submit event of the form? — Diodeus - James MacFarlane, Mar 29 '11 at 03:27
@RSG I believe it's returning what I want, please see my edit. (I'm supposed to bind to the `
` element, right?) — Chris W., Mar 29 '11 at 03:38
@RSG it does an AJAX query. I just tried commenting it out and the event still triggers twice. — Chris W., Mar 29 '11 at 04:07
I discovered some Javascript that when removed, makes the double event triggering go away, but I can't figure out WHY it's causing the problem!! I made a big edit to re-describe the problem. — Chris W., Mar 29 '11 at 04:18

score 7 · Accepted Answer · answered Mar 29 '11 at 05:28

7

The problem was in the first $(document).ready() function. I bound the click event of an input[type=image] to trigger a submit event on my form, but it turns out that image inputs already do a submit when clicked by default.

answered Mar 29 '11 at 05:28

Chris W.

37,583
36
99
136

score 1 · Answer 2 · answered Mar 29 '11 at 04:11

Selecting the form and preventing the default submit handler should all work as you describe it. I'm fairly certain an unrelated error (Maybe in do_search_selected()?) is preventing the call from reaching 'return false' which causes the form to submit as normal.

Edit

Just saw you last comment. You can test this by running just the selector, an alert, and the override. If you're using AJAX asynchronously in that function you may need to set async.

Also, add semicolons to the end of your statements!

jQuery Submit Event Happens Twice

2 Answers2