0

拼命尝试使 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 小提琴

4

2 回答 2

0

Put the delegate in document.ready. you are calling delegate on empty array as the DOM is not initialized yet and does not contain element with that ID. Moving that delegate function into document.ready will have events properly registered. That was the basic reason your jsfiddle is working and actual code is not working

于 2012-10-18T05:05:50.403 回答
0

delegateon在 jQuery 1.8中被替换为。

$("#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 不能以数字开头。

于 2012-10-18T05:20:08.103 回答