'$("#elementId").change()' 不工作，'$(document).on("change" "elementId")' 工作答案

【问题标题】：'$("#elementId").change()' is not working and '$(document).on("change" "elementId")' is working'$("#elementId").change()' 不工作，'$(document).on("change" "elementId")' 工作
【发布时间】：2014-01-10 07:01:22
【问题描述】：

最近我的网页发生了这样的情况，即使对于已经存在的 jsp 页面元素，$("#elementId").change() 也不起作用，但 $(document).on("change" "elementId" 可以。看起来页面document 正在懒惰地准备好，因此没有添加页面元素上的直接事件处理程序。有什么建议吗？

ps：我说的元素不是动态生成的。

JSP

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/receipt.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/myCss.css" >
<title>Generate Report</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>

<body>
<form:form action="getReceipt.html" commandName="viewQuote">
<div class="main_div">
<div>
    <table>
        <tr><td valign="top" align="left">
                Res Number
            </td>
            <td  valign="top" align="left" >
                <input id="reservatnNo" type="text" name="reservatnNo" value="">
            </td>
            </tr>
        </table>
</div>

<div>
    <table>
        <tr><td>
                <button id="generateReportButton" type="submit">
                    Submit Form
                </button>
            </td>
        </tr>
    </table>
</div>

</div>
</form:form>
</body>

Javascript

$( document ).ready(function() {
    jQuery.ajaxSettings.traditional = true;
});


$(document).on("change", "#reservatnNo", function(event) {
//$('#reservatnNo').change(function(){
    alert("changeddd");
});

【问题讨论】：

你能在这里分享你的代码吗？
#elementId 会动态加载吗？
@RajaprabhuAravindasamy 不，不像我说的那样动态。我只是使用锚链接从以前的网页调用网页。
@KrishR 如何在此处粘贴格式化代码？我所拥有的只是一个我正在评论的有限评论框。
@user2918640，无需在评论中添加代码，您可以随时编辑问题

标签： javascript jquery dom onchange

【解决方案1】：

确保$("#elementId").change() 在$(document).ready() 函数内。

否则 $("#elementId") 返回空的 jQuery 对象（因为控件还不存在）并且没有注册事件。

或者在ready方法之外，可以使用$(document).on()或者老方法$(document).bind()来实现可靠的事件处理。

【讨论】：

你可以对此发表评论。
我知道，做好准备是一种练习。但我很好奇他们几天前是如何在户外工作的。
如果你把它放在外面，那么就有可能为尚未在 DOM 中创建的控件注册事件
我同意你的看法。但我仍然很好奇他们是如何在外面工作的。
@user2918640 bind（尽管应该使用on！）表单因为delegated events而在外面工作。该事件实际上是绑定到文档的。当事件触发反对文档元素（通过冒泡），jQuery将那时检查事件目标和选择器（当事件发生时元素存在，因此匹配选择器）。