jQuery onClick功能不起作用

时间:2013-06-04 15:55:04

标签: jquery html

我有一个放在document.ready中的函数,并且从特定按钮的onclick调用该函数。单击按钮时没有任何反应。

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

,这是链接到该按钮的相应HTML。

<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>

2 个答案:

答案 0 :(得分:5)

问题是您的myFunctionDelete函数无法全局访问,因为它是在文档的ready事件中定义的。您需要将该函数移出事件处理程序。换句话说,改变:

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

要:

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

答案 1 :(得分:4)

你在这里所做的是从你指定的函数内部定义一个函数,它将是document.ready的事件处理程序。这意味着您的myFunctionDelete函数的范围将限制为document.ready函数的范围,并且任何其他Javascript例程都将无法访问它。

您只需要在document.ready事件处理程序中放置一次性初始化逻辑,而不是所有代码都需要去那里,尤其是如果您只是使用HTML {{ 1}}属性。

此外,您在onclick="..."事件处理程序的末尾错过了);

试试这个:

document.ready

或者抛弃$(document).ready(function() { }); function myFunctionDelete() { alert("Delete Clicked."); } 并使用它:

onclick

有了这个:

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