JQuery 更改选择框的功能。只运行第一个函数

Question

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

$(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>

Answer 1

有两件事:

1. <select>在“功能”<div>称为“functionID”，而不是“function”

2. 因为 ajax 调用会将新内容放入“函数”中，所以您应该使用“.delegate”来建立事件处理程序:

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

通过使用“.delegate()”，您可以将实际的事件处理程序连接到 <div> ，它将从随附的 <select> 中获取“更改”事件(其“id”最好是“function”)并运行处理程序。因为你永远不会破坏“功能”<div>无论第一个 ajax 调用运行多少次，处理程序都会继续工作。