无法从onclick事件调用JS函数

我想从两个不同按钮的onclick事件调用JavaScript函数。我已经挖掘并搜索了问题，但还没有找到解决方案。当我点击任一按钮时，出现错误无法从onclick事件调用JS函数

Error: 'RemoveCode' is undefined'

我在做什么错？

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     function RemoveCode(codeType) 
     { 
      var selectedProjectsField = $("#SelectedProjects"); 
      var selectedProjectCodesField = $("#SelectedProjectCodes"); 
      var selectedTasksField = $("#SelectedTasks"); 
      var selectedTaskCodesField = $("#SelectedTaskCodes"); 
      var selectedOption; 

      if (codeType = "Project") 
      { 
       selectedOption = $("#SelectedProjects :selected").index(); 
      } 
      else 
      { 
       selectedOption = $("#SelectedTasks :selected").index(); 
      } 

      alert(selectedOption); 
     } 

    }); 
</script>

代码为我的按钮：

 <li> 
      <label for="SelectedProjects">Selected Projects:</label> 
      <select size="1" id="SelectedProjects" name="SelectedProjects" multiple></select> <button class="removeButton" onclick="RemoveCode('Project')" type="button">-</button> 
     </li> 

     <li> 
      <label for="SelectedTasks">Selected Tasks:</label> 
      <select size="1" multiple id="SelectedTasks" name="SelectedTasks"></select> <button class="removeButton" onclick="RemoveCode('Task')" type="button">-</button> 
     </li>

我要指出，在同一页上有多个change事件页面上的其他元素，它们都做工精细。这就是这个失败的onclickP。

来源

2016-04-28 Matthew

+10

将其移出'就绪（）'回调，使其全球。更好地使用jQuery的'on（）'来绑定事件。 '（'。removeButton'）。click（function（）{...}）;' – Tushar

将你的函数放在$（document）.ready（）之后，你的函数就可以到达了。 –

在标签中使用onclick是不好的形式。按照其他人的建议，使用jQuery绑定事件。 – user1751825

首先注意，一边在if条件你需要使用==（不= ）来比较值。

要解决您的问题，您有两种选择。首先，你可以简单地移动RemoveCode功能出的document.ready处理程序的范围，以便它可以从onclick属性来访问：

<script type="text/javascript"> 
    function RemoveCode(codeType) 
    { 
     // your code... 
    } 

    $(document).ready(function() 
    { 
     // your code... 
    }); 
</script>

或者，这将是更好的做法使用添加你的事件处理程序不显眼的Javascript。当你正在使用jQuery，这里是你如何能做到这一点：

$(function() { 
    $('button').click(function() { 
    var $selectedProjectsField = $("#SelectedProjects"); 
    var $selectedProjectCodesField = $("#SelectedProjectCodes"); 
    var $selectedTasksField = $("#SelectedTasks"); 
    var $selectedTaskCodesField = $("#SelectedTaskCodes"); 
    var selectedOption; 

    if ($(this).data('codetype') == "Project") { 
     selectedOption = $selectedProjectsField.find(':selected').index(); 
    } else { 
     selectedOption = $selectedTasksField.find(':selected').index(); 
    } 

    alert(selectedOption); 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
    <li> 
    <label for="SelectedProjects">Selected Projects:</label> 
    <select size="1" id="SelectedProjects" name="SelectedProjects" multiple></select> 
    <button class="removeButton" data-codetype="Project" type="button">-</button> 
    </li> 

    <li> 
    <label for="SelectedTasks">Selected Tasks:</label> 
    <select size="1" multiple id="SelectedTasks" name="SelectedTasks"></select> 
    <button class="removeButton" data-codetype="Task" type="button">-</button> 
    </li> 
</ul>

来源

2016-04-28 13:38:23

添加事件处理函数比使用onclick有什么优势？ – Matthew

其优点是它遵循[分离关注]（https://en.wikipedia.org/wiki/Separation_of_concerns）模式。在这种情况下，这意味着你的HTML完全独立于JS（反过来应该完全独立于CSS）。在实践中，您应该能够对代码中的任何一部分进行修改，而无需修改任何其他部分。例如，如果我在我的JS代码中更改函数的名称，它不应该影响HTML。 –

好点，我不得不在稍后将代码移动到JS文件，我想我会花时间做清理和SoC。 – Matthew

您正在定义您的ready()方法，其内部为closure。然后您可以使用两种方法。首先，无法使用$(document).ready()作为调用ready()无法单击的按钮，直到文档准备就绪。二是你可以绑定onclick里面的$(document).ready()。

$(document).ready(function() { 
    $('#firstItem').click(function() { Ready('Project'); }); 
    .... 
});

来源

2016-04-28 13:26:56

或者将它保留在闭包中，并在那里绑定点击事件。 – user1751825

非常好的一点，修改我的答案以反映这一点。 –

您正在定义闭包内的RemoveCode方法。因此这个函数不能用作HTML元素的onclick回调函数。您只需更新代码，这和它应该工作：

<script type="text/javascript"> 

function RemoveCode(codeType) 
{ 
    var selectedProjectsField = $("#SelectedProjects"); 
    var selectedProjectCodesField = $("#SelectedProjectCodes"); 
    var selectedTasksField = $("#SelectedTasks"); 
    var selectedTaskCodesField = $("#SelectedTaskCodes"); 
    var selectedOption; 

    if (codeType = "Project") 
    { 
     selectedOption = $("#SelectedProjects :selected").index(); 
    } 
    else 
    { 
     selectedOption = $("#SelectedTasks :selected").index(); 
    } 

    alert(selectedOption); 
} 

</script>

来源

2016-04-28 13:28:52 babgyy

把你的功能出来的document.ready()

<script type="text/javascript"> 
    $(document).ready(function() // No Need of this Function here 
    { }); 
     function RemoveCode(codeType) // Automatically load when Your page is getting loaded on Browser. 
     { 
      var selectedProjectsField = $("#SelectedProjects"); 
      var selectedProjectCodesField = $("#SelectedProjectCodes"); 
      var selectedTasksField = $("#SelectedTasks"); 
      var selectedTaskCodesField = $("#SelectedTaskCodes"); 
      var selectedOption; 

      if (codeType = "Project") 
      { 
       selectedOption = $("#SelectedProjects :selected").index(); 
      } 
      else 
      { 
       selectedOption = $("#SelectedTasks :selected").index(); 
      } 

      alert(selectedOption); 
     } 


</script>

来源

2016-04-28 13:29:11

无法从onclick事件调用JS函数

回答

相关问题