用于选择框的JQuery更改函数。仅运行第一个函数

我正在尝试运行两个更改函数，一个是当一个选择框更改时，另一个是当另一个选择框更改时

$(document).ready(function() {      
        $("#area").change(function() { 
                $.ajax(
                {
                    type:"POST",
                    url: "./includes/AJAX/getFunctions.cfm?areaID=" + $(this).val(),
                    cache: false,
                    success: function(html)
                    {
                        $("#functions").html(html)
                    }
                }); //end of AJAX call
        }); //end of area

        $("#function").change(function() {
            alert("Change"); 
                $.ajax(
                {
                    type:"POST",
                    url: "./includes/AJAX/getDefects.cfm?functionID=" + $(this).val() + "&areaID=" + $("#area").val(),
                    cache: false,
                    success: function(html)
                    {
                        $("#defects").html(html)
                    }
                }
                );
        }); 
    });

我只能让第一个函数运行，但第二个函数永远无法运行。我使用firebug只是为了确保语法中没有错误，但它永远不会到达代码。有人知道发生了什么吗

以下是我的html中的选择框：

 <tr>
                        <td align="right">
                            Business Area:
                        </td>
                        <td align="left">
                            <cfselect name="area" id="area">
                            <option value="">Select Business Area</option>
                        <cfloop query="getAreas">
                            <option value="#getAreas.areaID#">#getAreas.areaDesc#</option>
                        </cfloop>
                            </cfselect>
                        </td>
                    </tr>
                    <!--- Business Function --->
                    <tr id="trFunction" style="display:none">
                        <td align="right">
                            Business Function:
                        </td>
                        <td align="left">
                        <div id="functions">
                            <select name="functionID" id="functionID">
                                <option value="">Select Business Function</option>
                            </select>
                         </div>
                        </td>
                    </tr>
                    <!--- Defect Type --->
                    <tr id="trDefect" style="display:none">
                        <td align="right">
                            Defect Type:
                        </td>
                        <td align="left">
                        <div id="defects">
                            <select name="defect" id="defect">
                                <option value="">Select Defect</option>
                            </select>
                         </div>
                        </td>
                    </tr>

以下是查询：

<cfquery name="getFunctions" datasource=#application.datasource#>     
    SELECT *
    FROM lamFunctions
    WHERE status = 1
    AND areaID = '#url.areaID#'
    ORDER BY functionDescription        
</cfquery>

<cfoutput>
    <select name="functionID" id="functionID">
        <option value="">Select Business Function</option>
    <cfloop query="getFunctions">
        <option id="#functionID#" name="#functionDescription#" value="#functionID#">#functionDescription#</option>
    </cfloop>
    </select>   
</cfoutput>

<cfquery name="getDefects" datasource=#application.datasource#>     
    SELECT *
    FROM lamDefects
    WHERE status = 1
    AND areaID = '#url.areaID#'
    AND functionID like '%#url.functionID#%'
    ORDER BY defectDesc        
</cfquery>

<cfoutput>
    <cfif #url.functionID# eq 3>
        <select name="defect" id="defect" style="width:350px">
            <option value="">Select Defect</option>
        <cfloop query="getDefects">
            <option id="#defectID#" name="#defectDesc#" value="#defectID#">#defectDesc#</option>
        </cfloop>
        </select>
    <cfelse>
        <select name="defect" id="defect">
            <option value="">Select Defect</option>
        <cfloop query="getDefects">
            <option id="#defectID#" name="#defectDesc#" value="#defectID#">#defectDesc#</option>
        </cfloop>
        </select>
    </cfif>    
</cfoutput>

两件事：

函数中的函数名为functionID，而不是function 由于ajax调用正在将新内容放入函数中，因此应使用.delegate来建立事件处理程序：

$('#functions').delegate('#function', 'change', function() {
  // your event handler here
});

---

通过使用.delegate，您将实际的事件处理程序连接到，它将从封闭的函数中获取更改事件，该函数的id最好是函数并运行该处理程序。因为您永远不会破坏函数，所以无论第一个ajax调用运行多少次，处理程序都将继续工作。

您实际上没有id=function的select，您的函数名为functionID

更改此选择器：

$("#function")

为此：

$("#functionID")

---

我看到的第一件事是调用$function上的第二个change函数，而第二个select语句的Id是functionID。第二件事是在document.ready函数中注册的事件处理程序只应用于页面上已经加载的元素。对于以后添加的图元，可以使用

$("#functionID").live('change', function(){
//handle event
});

但是在不同的浏览器IE上使用change event会给我带来一些问题。因此，另一个选项可以是使用jQuery的livequery库，也可以在回调第一个ajax请求时注册事件处理程序，如

$("#area").change(function() { 
                $.ajax(
                {
                    type:"POST",
                    url: "./includes/AJAX/getFunctions.cfm?areaID=" + $(this).val(),
                    cache: false,
                    success: function(html)
                    {
                        $("#functions").html(html)
                        $("#functionID").change(function(){
                            //handle event here                       
                         });
                    }
                }); //end of AJAX call

---

乍一看很不错。。。你的HTML是什么？最明显的是函数与函数的比较。这是故意的吗？函数是一个div，函数是一个选择框。函数是divfunctions中的选择框吗？我是这样做的，但没有帮助。我想这可能与保留的函数有关。不应该，但你肯定需要给它们起相同的名字。如果你想在html中使用functionID，那么请确保你的jquery显示functionIDSorry，我在发布后做了一些更改，随后发布了更新。很好！成功了。我感谢你的帮助！对不起，我对JQuery很陌生，并不总是知道一切是如何运作的。@shawleigh我建议也试试Pointy的答案。委派是新事物，可能会比传统方式带来一些好处。基本上，你可以做的任何事情。生活中你可以做。委派，但事实并非如此。.delegate的主要优点是，建立处理程序更有效，并且允许泡点位于DOM中的任何位置。live始终将处理程序放在标记上。仅供参考live现在不推荐使用，您应该使用$functionID。在“更改”上，函数{}；现在使用delgate在浏览器兼容性方面有什么问题吗？换一种说法；使用委托时有什么注意事项吗？没有，make.delegate和相关的.live-我更喜欢.delegate在所有主要浏览器中正常工作是jQuery的核心功能。+1我在使用带有选择列表更改事件的live时遇到了一些问题。是有什么问题吗？还是我应该检查一下我写的代码？我在网上发现，某些更改事件在某些浏览器上是可传播的，而在其他浏览器上则是不可传播的。可能会有一些问题，但我认为来自的更改应该是可靠的。你看到一些实际的问题了吗？是的，我在使用live函数的change时遇到了问题，我不得不绕道而行。让我再次检查，如果问题仍然存在，我将在单独的问题中发布，并让你们知道。谢谢