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>

- うまくいかないこと

ajax を使用してデータベースから情報を取得する JavaScript 関数を使用しました。結果に応じて有効または無効のラジオボタンが割り当てられたメールボックスのリストが表示されます。

ラジオボタンをクリックすると、以下の機能は何もしません。つまり、アラートボックスになります。ただし、生成された 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

デリゲートをdocument.readyに配置します。DOMはまだ初期化されておらず、そのIDの要素が含まれていないため、空の配列でデリゲートを呼び出しています。そのデリゲート関数をdocument.readyに移動すると、イベントが適切に登録されます。これが、jsfiddleが機能していて、実際のコードが機能していない基本的な理由です。

于 2012-10-18T05:05:50.403 に答える
0

デリゲートonは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');
});

また、ラジオ ボタンに name 属性を指定し、HTML4 の ID を数字で開始することはできません。

于 2012-10-18T05:20:08.103 に答える