Question

绝望地尝试使Jquery的.delegate方法正常工作。我希望委托函数确认更改或单击循环返回的单选按钮。

但是，使用委托方法无法使用我的代码。

$("#MailGroupResults").delegate("input[type=radio]", "click", function () {
        alert('works');
});
<div class="secResultCon" id="MailGroupResultsCon">
  <div class="secResult" id="MailGroupResults">
  <!-- Following Code is generated by jquery loop -->
  <p>Mailbox Permissions</p>
  <div class="optionResources">
   <div class="optionResourceMini">
    Group
   </div>

  <div class="optionResourceMini">

  <div class="switch">
   <input type="radio" id="11" class="checkbox" name="Jindabyne Tickets">
   <input type="radio" id="10" class="checkbox" name="Jindabyne Tickets" checked="">
   <label class="cb-enable"><span>On</span></label>
   <label class="cb-disable selected"><span>Off</span></label>
  </div>
 </div>
 </div>
</div>

- 什么行不通

我使用了一个javascript函数，它使用ajax从数据库中提取信息。它将显示一个邮箱列表，每个邮箱分配一个单选按钮，根据结果启用或禁用。

当我点击单选按钮时，下面的功能没有做任何事情，这意味着警告框。但是，如果我将生成的html复制到我的代码中，它将会起作用......混淆。

$("#MailGroupResults").delegate("input[type=radio]", "click", function () {
        alert('works');
});

Javascript如何生成子元素

function GetUserMailGroups(userName) {
        $("#Mailloading").show();
        $.ajax({
            type: 'POST',
            url: 'ADMethods.asmx/GetEmailGroups',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: '{ userName : "' + userName + '"}',
            success: function (response) {
                $("#Mailloading").fadeOut();
                GetMailGroups = false;
                var memberOfMail = response.d;
                i = 0;
                // Create Javascript Array to contain the Mailbox information so that we can run check against when 
                // a switch is pressed. Therefore, on form submission we can identify changes of permissions
                arrSize = memberOfMail.length;
                arrMail = new Array(arrSize);
                $.each(memberOfMail, function (index, MailInfo) {
                    arrMail[i] = new Array(2);
                    var html = '<div class="optionResources">';
                    var html = html + '<div class="optionResourceMini">' + MailInfo.GroupName + '</div>';
                    var html = html + '<div class="optionResourceMini">';
                    var html = html + '<div class="switch">';
                    // Apply returned data to array
                    arrMail[i][0] = MailInfo.GroupName
                    if (MailInfo.MemberOf) {
                        var html = html + '<input type="radio" id="' + i + '1" class="checkbox" name="' + MailInfo.GroupName + '" checked />';
                        var html = html + '<input type="radio" id="' + i + '0" class="checkbox" name="' + MailInfo.GroupName + '" />';
                        var html = html + '<label class="cb-enable selected"><span>On</span></label>';
                        var html = html + '<label class="cb-disable "><span>Off</span></label>';
                        arrMail[i][1] = true;
                    } else {
                        var html = html + '<input type="radio" id="' + i + '1" class="checkbox" name="' + MailInfo.GroupName + '" />';
                        var html = html + '<input type="radio" id="' + i + '0" class="checkbox" name="' + MailInfo.GroupName + '" checked />';
                        var html = html + '<label class="cb-enable"><span>On</span></label>';
                        var html = html + '<label class="cb-disable selected"><span>Off</span></label>';
                        arrMail[i][1] = false;
                    }

                    var html = html + '</div>';
                    var html = html + '</div>';
                    var html = html + '</div> ';
                    $("#MailGroupResults").append(html);
                    // Increase i integer for array index.
                    i++;
                })
            }
        });
    }

我设法在jsfiddle中使用相同的方法。缩小它的基本方法，即循环。

http://jsfiddle.net/aFSmF/4/ JS Fiddle

Answer 1

将委托放在document.ready中。您正在空数组上调用委托，因为DOM尚未初始化，并且不包含具有该ID的元素。将该委托功能移动到document.ready中将正确注册事件。这是你的jsfiddle工作的基本原因，实际代码不起作用

Answer 2

在jQuery 1.8中，

delegate已替换为on。

$("#MailGroupResults").delegate("input[type=radio]", "click", function () {
    alert('works');
});

应该使用on。

$("#MailGroupResults").on("click", 'input[type="radio"]', function () {
    alert('works');
});

或

$(document).on("click", '#MailGroupResults input[type="radio"]', function () {
    alert('works');
});

同时为您的单选按钮指定名称属性，HTML4中的ID不能以数字开头。

无法成功使用Jquery .delegate（）方法

2 个答案: