无法成功使用 Jquery .delegate() 方法

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

delegate 在 jQuery 1.8 中已替换为 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 不能以数字开头。