jQuery, переменные и обработчики живых событий - PullRequest
Новая
       4

jQuery, переменные и обработчики живых событий

0 голосов
/ 07 апреля 2011

У меня есть две страницы: главная вызывает другую через 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?

Ответы [ 3 ]

1 голос
/ 07 апреля 2011

Не так, как вы описываете, нет.Селектор jQuery запускается один раз во время создания и создает объект jQuery, содержащий элементы, соответствующие селектору.Элементы, которые соответствуют, но добавляются позже, не будут частью объекта.

Теперь функции live и delegate позволяют обойти это, но они работают только для обработки событий.По сути, если вы устанавливаете обработчик событий, используя live, он перехватывает все события (для всех элементов) и проверяет, соответствует ли элемент, инициирующий событие, указанному селектору.(Таким образом, не имеет значения, существовал ли этот элемент в то время, когда функция live была вызвана изначально.)

Это не дает вам способа автоматически сохранять постоянно обновляемый список отмеченных флажков, когда выХотелось бы, однако, сделать это.

Другой подход - создать функцию, которая возвращает желаемый список, а затем использовать его (если ваша цель - уменьшить количество набираемого / повторяющегося кода): 

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

alert("Checked Boxes: " + CheckedCheckboxes().length);
1 голос
/ 07 апреля 2011

Итак, в основном вы видите, что оператор 

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

разрешает (выполняет) при вызове.Вы как бы пытаетесь отложить казнь.Вы можете просто сохранить селектор в переменной и использовать его: 

var selector = "input:checkbox[name='SomeChoice']:checked";
...
$('#MyDiv').find(selector).length;
0 голосов
/ 07 апреля 2011

да, вы можете:

присвойте всем вашим флажкам одинаковые 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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...