如何使用 Thymeleaf blur/onblur 事件调用函数？答案

【问题标题】：How to use Thymeleaf blur/onblur event to call function?如何使用 Thymeleaf blur/onblur 事件调用函数？
【发布时间】：2020-04-22 22:33:52
【问题描述】：

下面是我的 HTML 和 Javascript。我正在使用 thymeleaf。我想要的是对此选择标签执行模糊操作，即模糊提醒用户选择的值。

$(document).ready(function(){
alert("called");
  });
});

function addSubject(){
      var x = document.getElementById("sub").value;
      alert(x);
}

<body>
    <div class="form-group" style="margin-top: 10px;">
       <label th:text="'Subject'"></label>
          <select class="form-control" id="sub" th:onblur="'addSubject()'">
          <option value="" th:disabled="disabled" th:selected="selected" th:text="'Select Subject'"></option>
                  <option th:text="'Add New Subject'" th:value="addSub"></option>
                  <option th:each="freesub : ${detailsofexams}"
                          th:text="${#strings.capitalize(freesub)}"
                          th:value="${#strings.toUpperCase(freesub)}">
                  </option>
                </select>
              </div>
<script
  th:src="@{${@mvcResourceUrlProvider.getForLookupPath('/admin/dist/js/freecontent.js')}}"></script>

</body>

【问题讨论】：

请尝试替换 |由'
@SimonMartinelli 先生，我尝试了相同但仍然无法正常工作的代码：th:onblur="'addSubject()'"
您是否在浏览器的开发者工具中看到错误消息？
你在哪里定义了 JavaScrpt 方法？
@SimonMartinelli 先生，我刚刚更新了代码，不，我没有收到任何错误。另请注意，在页面加载时，我可以提醒“已调用”。

标签： javascript java html jquery thymeleaf

【解决方案1】：

他们是我的 JS 文件中的拼写错误，正如@Simon sir 在我的代码开始工作后在第一条评论中所建议的那样。下面是正确的代码

$(document).ready(function(){
alert("called");
  });

function addSubject(){
  alert("x");
}

<div class="form-group" style="margin-top: 10px;">
            <label th:text="'Subject'"></label>
            <select class="form-control" id="sub" th:onblur="'addSubject()'">
              <option value="" th:disabled="disabled" th:selected="selected" th:text="'Select Subject'"></option>
              <option th:text="'Add New Subject'" th:value="addSub"></option>
              <option th:each="freesub : ${detailsofexams}"
                      th:text="${#strings.capitalize(freesub)}"
                      th:value="${#strings.toUpperCase(freesub)}">
              </option>
            </select>
          </div>

【讨论】：