無法通過onclick事件調用JS函數

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條件中，您需要使用== （not = ）比較值。

要解決您的問題，您有兩種選擇。 首先，您可以簡單地將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

您正在閉包內部定義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>