Question

我试图从两个不同按钮的onclick事件中调用JavaScript函数。我挖了一遍，寻找类似的问题，但没有找到解决方案。当我点击任一按钮时，我收到错误

错误：'RemoveCode'未定义'

我做错了什么？

<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

您正在闭包中定义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>

Answer 2

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

Answer 3

您正在closure内定义ready()方法。然后，您可以使用两种方法。首先，您无法使用$(document).ready()因为无论如何都无法点击调用ready()的按钮，直到文档准备就绪为止。其次，你可以绑定onclick内的$(document).ready()。

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

Answer 4

将您的功能放在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>

无法从onclick事件调用JS函数

4 个答案: