2012-10-18 60 views
0

拼命嘗試使Jquery的.delegate方法按我需要的方式工作。我希望委託函數確認更改或單擊從循環返回的單選按鈕。無法成功使用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 Fiddle

+2

*「我設法使用同樣的方法在jsfiddle中工作」*:然後我明白你的問題是什麼/你想知道什麼。你在這裏發佈的代碼並不是很有用,因爲它混合了JS和HTML,而且你執行什麼時還不清楚。另外,什麼*「不起作用」*? –

+0

什麼都不起作用,你的小提琴中的代碼工作。 – undefined

+0

你應該使用on()與jQuery 1.8.2 – epascarello

回答

0

將委託中的document.ready。您在空數組上調用委託,因爲DOM尚未初始化,並且不包含具有該ID的元素。將該委託函數移動到document.ready中將正確註冊事件。這是你的jsfiddle工作和實際代碼不工作的基本原因

+0

請詳細說明一下? – goingsideways

+0

上面的評論說它在$()中,所以它已經設置好了。 – epascarello

+0

@epascarello現在看到OP的評論 – Amareswar

0

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'); 
}); 

也給你的單選按鈕的名稱屬性和IDS在HTML4無法以數字開頭。

+0

不幸的是仍然沒有運氣,我更新到1.8,但生成的html仍然沒有被on()方法檢測到。 – goingsideways