javascript - 无法从 onclick 事件调用 JS 函数

Question

我正在尝试从两个不同按钮的 onclick 事件调用 JavaScript 函数。我四处寻找并搜索了类似的问题，但没有找到解决方案。当我点击任一按钮时，我得到错误

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 失败了。

Answer 1

首先请注意，在您的 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>