CODEWITHSUNDEEP
javascriptjqueryhtml
user1321237
user1321237

Reputation:

onclick event handler doesn't fire

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?

Upvotes: 1

Views: 1562

Answers (3)

gdoron
gdoron

Reputation: 150253

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();
    });
});

Upvotes: 3

andyb
andyb

Reputation: 43823

With your existing code, if you want to do down the jQuery route you can bind the click() event like so:

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

This is binding the click event to all elements with the class .btn. You could use a different selector if you want to be more specific.

The reason your existing code is not working is because the onclick cannot find your function because you defined it inside the jQuery $(document).ready function.

Upvotes: 0

Shyju
Shyju

Reputation: 218732

HTML

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

Script 

$(function(){
 $("#btnSave").click(function(){
   //Your code for Save changes goes here
 });
});

Upvotes: 0

Related Questions