Prevent backbone event from firing

Question

I have a basic form with a backbone view, when I press enter on the top input the open event is fired. How can I ensure that the open event only fires when I press the browse button?

<form method="post">
    <div>
        <input type="text" />
    </div>
    <div id="myId">
        <input type="text" />
        <button class="browse">Browse...</button>
    </div>
    <input type="submit" value="Save" />
</form>

var MyView = Backbone.View.extend({

    events: {
        'click button.browse': 'open'
    },

    open: function(e) {
        alert('Open dialog');
    },

    initialize: function() {},

    render: function() {}
});

$(function() {
    var myView= new MyView({ el: $('#myId') });
});​

​

jsFiddle here

Answer 1

You need to specify type="button" , otherwise it defaults to submit , and hitting enter on an textbox input in a form triggers submit...

http://jsfiddle.net/PJhED/40/

    <button class="browse" type="button">Browse...</button>

Answer 2

Change it to <button class="browse" type="button">Browse...</button>

http://jsfiddle.net/2Rt6p/1/