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

两件事：

“函数”<select>中的<div>称为“functionID”，而不是“function”
因为ajax调用正在将新东西放入“函数”中，所以应该使用“.delegate”来建立事件处理程序：
```
$('#functions').delegate('#function', 'change', function() {
  // your event handler here
});
```

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

Answer 2

我看到的第一件事是你在$（“＃function”）上调用第二个更改函数，而第二个select语句的id是functionID。第二件事是在document.ready函数中注册的事件处理程序仅适用于已经加载到页面上的元素。对于稍后添加的元素，您可以使用

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

但在live上使用change事件会在不同的浏览器上引起一些问题（尤其是IE）。所以另一种选择可能是使用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

Answer 3

你实际上没有id = function的select，你的名字叫做functionID

Answer 4

更改此选择器：

$("#function")

对此：

$("#functionID")

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

4 个答案: