jQuery submit not firing

Question

I feel stupid for asking this, but why is my .submit not firing an alert?

HTML

<div class="buttonbar" style="margin-left:10%">
 <button class="btn btn-danger">Cancel</button>
 <button class="btn btn-success" id="publish">Publish</button>
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function() { 
        $('#publish').submit(function(){
            alert("hello");
        }); 
    }); 
</script>

When I click "publish" jQuery does not popup with an alert. What am I doing wrong?

Answer 1

Because it is not a submit button, It wont have an event called submit while it is out of the scope of a <form> tag.

Just try with click event,

$(document).ready(function() { 
    $('#publish').click(function(){
        alert("hello");
    }); 
}); 

or you have to make changes in your html like,

<div class="buttonbar" style="margin-left:10%">
 <form>
 <button class="btn btn-danger">Cancel</button>
 <input class="btn btn-success" id="publish" type="submit" value="Publish"/>
 </form>
</div>

JS:

$(document).ready(function() { 
    $('#publish').submit(function(e){
        e.preventDefault();
        alert("hello");
    }); 
});

Answer 2

You're using a <button> rather than an <input type="submit"> And you've got no <form> for the submit function to act upon (actually, that alone is probably your problem).