javascript - onclick event handler doesn't fire

Question

I have the following code:

<div class="modal-footer">
   <a class="btn btn-primary" onclick="saveChanges ();">Save changes</a>
</div>

<script type="text/javascript">
$(document).ready(function() {
   function saveChanges () {
      tinyMCE.triggerSave();
   } 
   ...
   ...

I'm not sure why but when I click on the "Save changes" link then nothing happens and it does not seem to call the saveChanges function.

Is there a way that I could remove the onClick event from the link and just have it so that the saveChanges() functionality is attached to the clicking of the link with jQuery?

Answer 1

The function should be in the global scope, if it's in an inner scope it's not accessible to the onclick=...:

<script type="text/javascript">
   function saveChanges () {
      tinyMCE.triggerSave();
   } 
</script>

or with jQuery:

<a class="btn btn-primary"> Save changes</a>

<script type="text/javascript">
$(function(){
    $('.btn-primary').click(function(){
        tinyMCE.triggerSave();
    });
});
</script>

---

It would be a good idea to give the <a> an id like this:

<a id="theAnchor"> Save changes</a>

Then...

$(function(){
    $('#theAnchor').click(function(){
        tinyMCE.triggerSave();
    });
});