Jquery onchange事件未触发答案

【问题标题】：Jquery onchange event not triggeringJquery onchange事件未触发
【发布时间】：2016-03-22 23:14:31
【问题描述】：

我陷入了这样一种情况，即我有一个带有选择标签的 Struts2 表单，当更改该标签时应该触发一个事件，我无法弄清楚为什么 onchange 函数没有触发，但奇怪的是 @ 987654322@ 触发事件在另一个示例中起作用。我在这里很困惑。

不工作：

<%@ 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>

【问题讨论】：

@Andrea Ligios 是的，先生正在按照您的解释进行尝试。

标签： javascript jquery html struts2 jquery-selectors

【解决方案1】：

#something 选择器（在 jQuery 和 CSS 中）是 ID 选择器。意思是：

选择id属性等于something的对象。

由于您的两个<s:select/> 都没有设置id 属性，因此在上述任何情况下都不应该工作。

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

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

第一个例子：

因为您有一个表单，所以您选择的 id 将类似于 id="form1_company"（或 id="formNewAction1_company"，我不记得 Struts2 为表单生成 id/name 的方式，因为你的<form> 也错过了他们！..)。
第二个例子：

<s:select> 没有包含在表单中，因此由于其 name 是 "state"，因此自动生成的 id 将为 id="state" ，并将由 $('#state') 选择器匹配。

故事的寓意：

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

【讨论】：

我也这么认为。
@Andrea Ligios 您的解决方案和解释解决了这个问题。

【解决方案2】：

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

【讨论】：

我希望 onchange 事件在公司发生变化而不是订单类型发生变化时触发。

【解决方案3】：

首先，我在第一个 HTML 中没有看到任何与#company 匹配的元素，但在所谓的工作示例中我也没有看到与#state 匹配的元素......所以这很令人困惑。您有一个“select[name=company]”，但没有一个选择框具有值为“company”的 id 属性。

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

【讨论】：