Jquery onchange 事件未触发

Question

我遇到了这样一种情况，我有一个带有 select 标签的 Struts2 表单，更改后应该会触发一个事件，但我无法弄清楚为什么 onchange函数没有触发，但奇怪的是 onchange 触发事件在另一个示例中有效。我在这里很困惑。

不工作：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Order</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script type='text/javascript'>
    $(function(){
        $('#company').change(function() {
            var selected = $('#company').val();
            alert(selected);
        });
    });

</script>
</head>
<body>
    <s:form action="NewOrder">
        <s:select headerKey="-1" headerValue="Select Company" name="company"
            label="Select Company" list="{'companies','industries'}" />
    Select Item:
    <select id="item"></select>
        <s:select id="ordertype" name="purchaseorder.orderType"
            list="{'Consumables','Tools','Raw Materials'}" label="Order Type" />

        <s:textfield name="purchaseorder.orderDate" label="Order Date" />

        <s:textfield name="purchaseorder.deliveryDate" label="Delivery Date" />

        <s:textfield name="purchaseorder.exciseDuty" label="Excise Duty" />

        <s:textfield name="purchaseorder.salesTax" label="Sales Tax" />

        <s:textfield name="purchaseorder.remarks" label="Remarks" />

        <s:textfield name="purchaseorder.deliverySchedule"
            label="Delivery Schedule" />

        <s:submit />
    </s:form>
</body>
</html>

工作：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        $('#state').change(function(){
            var sel = $('#state').val();
            alert(sel);
            });
        });
</script>
</head>

<body>
    <h3>Struts 2 Dynamic Drop down List</h3>
    <s:select label="What's your State" headerKey="-1"
        headerValue="Select State" list="states" name="state" 
        value="defaultState" />
    District :
    <select id="district"></select>
</body>

</html>

Answer 1

 $(function(){
        $('#ordertype').change(function() {        //id shoud be orderType not company
            var selected = $('#ordertype').val();
            alert(selected);
        });
    });

Answer 2

首先，我在第一个 HTML 中没有看到任何与 #company 匹配的元素，但在假设有效的示例中我也没有看到与 #state 匹配的元素....所以这很令人困惑。您有一个 "select[name=company]" 但没有 select 框具有值为 'company'.

的 id 属性

如果您的页面上有任何动态更改，例如通过 ajax 加载的内容（例如添加的 id attr），您可能需要使用此：.on()

Answer 3

#somethingselector（在jQuery和CSS中）是ID selector.意思是：

select the object with the id attribute equals to something.

由于您的 <s:select/> 都没有设置 id 属性，因此在上述情况的 none 中应该不起作用。

然而，为什么它在那里工作而不在这里的解释很简单：

Struts2 在未指定时为您生成 id。 id 通常以 formName_elementName 的形式自动生成（或 formId_elementName，我不确定）。

第一个例子:

因为你有一个表格，所以你的 select 的 id 会像 id="form1_company"（或 id="formNewAction1_company"，我不记得了 Struts2 为表格生成 id/name，因为你的 <form> 也缺少它们！..）。
第二个例子:

<s:select> 没有包含在表单中，因此由于它的 name 是 "state"，自动生成的 id 将是 id="state" ，并且将被匹配$('#state') select或.

故事的寓意：

总是给你的对象一个id，至少给你需要使用的那个JavaScript。

Jquery onchange 事件未触发

Jquery onchange event not triggering

html

javascript

jquery

struts2

jquery-selectors

故事的寓意：