jQuery，变量和实时事件处理程序

我有两个页面:主页面通过AJAX调用另一个页面以获取复选框列表。当我试图在主页上获得选中的复选框的计数时，我只能使用内联jQuery——试图通过我在中初始化的变量获得它$(document.ready()) 不起作用。

主页:

<!doctype html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <script src="/jquery-1.5.1.js"></script>
        <script>
        var MyDiv, CheckedCheckboxes;
        var bIsLoading;
        $(document).ready(function(){
            $("input:checkbox[name='SomeChoice']").live("click", function(){
                ShowCheckboxCount();
            });
            MyDiv = $("#MyDiv");
            CheckedCheckboxes = MyDiv.find("input:checkbox[name='SomeChoice']:checked");
            bIsLoading = false;
        });
        function ShowCheckboxCount()
        {
            var countUsingVariable = CheckedCheckboxes.length;
            var countUsingInline = $("#MyDiv").find("input:checkbox[name='SomeChoice']:checked").length;
            var alertMsg = (
                '# of checked checkboxes (using MyDiv variable) = ' + countUsingVariable + 'n' + 
                '# of checked checkboxes (using inline jQuery) = ' + countUsingInline
            );
            alert(alertMsg);
        }
        function LoadCheckboxes()
        {
            if (bIsLoading)
            {
                alert('Options are still loading.');
                return;
            }
            bIsLoading = true;
            $.ajax({
                type: "POST",
                dataType: "html",
                url: "GetGuidOptions.asp",
                data: "",
                timeout: 5000,
                success: function(data, textStatus, XmlHttpRequest){
                    $('#MyDiv').html(data);
                },
                error: function(XmlHttpRequest, textStatus, errorThrown){
                    alert('An error occurred while attempting to load the options.');
                },
                complete: function(XmlHttpRequest, textStatus) {
                    bIsLoading = false;
                }
            });
        }
        </script>
        <form id="MyForm" name="MyForm">
        <div id="MyDiv">
        </div>
        <input type="button" value="Load Checkboxes" onclick="LoadCheckboxes()">
        <input type="button" value="Show Checkbox Count" onclick="ShowCheckboxCount()">
        </form>
    </body>
</html>

这是第二页——它是用VBScript/ASP编写的，但可以很容易地使用任何服务器端语言完成:

<%
    Option Explicit
    '##################################################################################
    '// GetAlphanumericGUID() - Generate a GUID containing only letters and numbers.
    '##################################################################################
    Function GetAlphanumericGUID()
        Dim oTypeLib, sGUID, oRegEx, sAlphanumericGUID
        '// Generate a GUID.
        Set oTypeLib = Server.CreateObject("Scriptlet.TypeLib")
            sGUID = Trim(Left(oTypeLib.GUID, 38))
        Set oTypeLib = nothing
        '// Remove all non-alphanumeric characters from the GUID.
        Set oRegEx = New RegExp
            oRegEx.Pattern = "W"
            oRegEx.IgnoreCase = True
            oRegEx.Global = True
            sAlphanumericGUID = Replace(oRegEx.Replace(sGUID, ""), "_", "")
        Set oRegEx = Nothing
        GetAlphanumericGUID = sAlphanumericGUID
    End Function

    dim i, sValue
    for i = 1 to 10
        '// Generate a GUID string 5 characters in length
        sValue = Left(GetAlphanumericGUID(), 5) %>
<input type="checkbox" name="SomeChoice" value="<%=sValue%>"> <%=sValue%><br>
<%    next %>

是否有一些方法可以让它工作，所以我可以使用 CheckedCheckboxes.length 而不是 $("#MyDiv").find("input:checkbox[name='SomeChoice']:checked").length 获得选中的复选框计数?

不像你说的那样。jQuery选择器在创建时运行一次，并创建一个包含与选择器匹配的元素的jQuery对象。匹配后添加的元素不会成为对象的一部分。

现在，live和delegate函数提供了一种绕过该问题的方法，但它们仅用于事件处理。基本上，如果使用live设置事件处理程序，它会捕获所有事件(针对所有元素)，并检查触发事件的元素是否与给定的选择器匹配。(因此，当live函数最初被调用时，该元素是否存在并不重要。)

这并没有给你一种方法来自动保持一个连续更新的复选框列表，尽管你想这样做。

另一种方法是创建一个返回所需列表的函数，然后使用该函数(如果您的目标是减少输入/重复代码):

function CheckedCheckboxes() {
    return MyDiv.find("input:checkbox[name='SomeChoice']:checked");
}
alert("Checked Boxes: " + CheckedCheckboxes().length);

基本上你看到的是语句

$("#MyDiv").find("input:checkbox[name='SomeChoice']:checked")

在被调用时解析(执行)。你是想拖延死刑。你可以做的一件事是将选择器保存在一个变量中并使用它:

var selector = "input:checkbox[name='SomeChoice']:checked";
...
$('#MyDiv').find(selector).length;

yes you can:

给所有的复选框设置相同的class:

<input type="checkbox" name="SomeChoice" value="<%=sValue%>" class='someClass'> 
    <%=sValue%><br>
<input type="checkbox" name="SomeChoice" value="<%=sValue%>" class='someClass'> 
    <%=sValue%><br>

然后在js中:

$('input.someClass:checked').length

相关内容

最新更新

热门标签：