jQuery onClick Function not working

Question

I have a function that I placed inside the document.ready and the function is called from onclick of a specific button. Nothing happens when the button is clicked.

$(document).ready(function() 
{
    function myFunctionDelete()
    {
        alert("Delete Clicked.");
    }
}

and here is the corresponding HTML linked to that button.

<form action="edit.php" method="POST">
    <table>
    <tr id="formTitle" name="formTitle"><strong>Edit Event Now</strong></tr>
    <input type="hidden" id="deletedHidden" name="deletedHidden" value="" />
    <input type="hidden" id="dateForm2" name="dateForm2" value="" />
    <input type="hidden" id="titleEditOld" name="titleEditOld" value="" />
    <tr id="formTitle"><td><label id="titleLabel" for="Title"><strong>Title:</strong></label><input id="titleEdit" name="titleEdit" type="text" value="Event Title">
    <tr id="formTitle"><td><label for="startTimeHours"><strong>Time:</strong></label><select id="startHours" name="startHours"><option>--</option>                                                                                        <option>12</option>                                                                                         <option>1</option><option>2</option>                                                                                        <option>3</option><option>4</option>
                                                                                          <option>5</option><option>6</option>
                                                                                          <option>7</option><option>8</option>
                                                                                          <option>9</option><option>10</option>
                                                                                          <option>11</option></select>
    <select id="startMinutes" name="startMinutes"><option>--</option>                                                                                         <option>00</option>
                                                                                          <option>05</option><option>10</option>
                                                                                          <option>15</option><option>20</option>
                                                                                          <option>25</option><option>30</option>
                                                                                          <option>35</option><option>40</option>
                                                                                          <option>45</option><option>50</option>
                                                                                          <option>55</option></select>

    <input type="radio" name="AMPM" value="am">am
    <input type="radio" name="AMPM" value="pm">pm<br>
    <p><strong>All Day Event?</strong>
    <input type="checkbox" name="AllDay" value="true"></p>                                                                
    <tr id=formTitle"><td><input id="submit" type="submit" value="Submit">
    <button type="button" onclick="myFunctionDelete()">Delete Event</button>
    </table>

can you create a fiddle of the exact problem you are facing? — klewis
– klewis, Commented Jun 4, 2013 at 15:57
it works fine for me go here and see: jsbin.com/ojeweb/1/edit Have you included the Jquery library in the head of your page? — azzy81
– azzy81, Commented Jun 4, 2013 at 15:58

Mike Christensen · Accepted Answer · 2013-06-04 15:58:16Z

7

The issue is that your myFunctionDelete function is not accessible globally, as it's defined within the ready event for the document. You'll need to move the function out of the event handler. In other words, change:

$(document).ready(function() 
{
    function myFunctionDelete()
    {
        alert("Delete Clicked.");
    }
}

To:

$(document).ready(function()
{
   // Any code that should be run when the DOM is ready
});

// This is now a global function
function myFunctionDelete()
{
   alert("Delete Clicked.");
}

answered Jun 4, 2013 at 15:58

Mike Christensen

91.8k52 gold badges223 silver badges349 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

qJake Over a year ago

I say the exact same thing as you, with more explanation, AND provide an alternate solution, and your post gets 3 votes and mine gets -1. This site confuses the crap out of me sometimes ... *sigh*

klewis Over a year ago

that does not work - try putting that in a fiddle with the OP's original HTML on this page.

Mike Christensen Over a year ago

@blachawk - Well, according to the OP who accepted this answer, it - and I quote - "works perfectly."

klewis Over a year ago

@MikeChristensen But according to your knowledge, are you going to correct him?

qJake · Accepted Answer · 2013-06-04 16:05:09Z

What you've done here is defined a function from inside the function you've specified will be the event handler for document.ready. This means your myFunctionDelete function will have its scope limited to that of the document.ready function, and any other Javascript routines will not be able to access it.

You only need to put one-time initilalization logic within the document.ready event handler, not all your code needs to go there, especially if you're just using the HTML onclick="..." attribute.

Also, you're missing a ); at the end of the document.ready event handler.

Try this:

$(document).ready(function() 
{

});

function myFunctionDelete()
{
    alert("Delete Clicked.");
}

Or ditch the onclick and use this:

<button id="deleteButton">Delete Event</button>

With this:

$(document).ready(function() 
{
    $('#deleteButton').click(function()
    {
        alert("Delete Clicked.");
    });
});

Collectives™ on Stack Overflow

jQuery onClick Function not working

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related