ajax調用後沒有樣式的複選框

我有一個腳本文件scripts.js，其中包含一個函數，用於設置頁面中的所有複選框。該文件在母版頁中被引用。ajax調用後沒有樣式的複選框

有一個用戶控件和一個aspx測試頁面。在加載頁面時，UC會顯示覆選框列表並應用樣式。

單擊按鈕時，ajax調用從數據庫獲取列表，並將更多複選框綁定到頁面。但對於新的複選框，該樣式不適用。有什麼可能會出錯。

scripts.js中：

function selectcheckBtn() { 
    alert(1); 
    if ($("input:checkbox").prev("span").length === 0) { 
     alert(2); 
     $("<span class='uncheked'></span>").insertBefore("input:checkbox") 
    } 
    $("input:checkbox").click(function() { 
     check = $(this).is(":checked"); 
     if (check) { 
      $(this).prev("span").addClass("cheked").removeClass("uncheked") 
     } else { 
      $(this).prev("span").addClass("uncheked").removeClass("cheked") 
     } 
    }); 
    $("input:checked").prev("span").addClass("cheked").removeClass("uncheked") 
}

ctrl.ascx：

<script> 
function ShowMore() { 
     $.ajax({ 
      url: "/_layouts/15/handlers/ShowMore.ashx",    
      data: {}, 
      success: function (msg) {  
//append new chkbox list to existing list. It is hidden at first and later faded in.    
       $(".divList").append(msg); 
        selectcheckBtn(); 
        $(".hideDiv").fadeIn(300).removeClass("hideDiv");      
       }, 
      error: function (msg) { 
       alert("An error occurred while processing your request");     
      } 
     }); 
    } 

</script> 
<a href="javascript:;" id="btnMore" runat="server" onclick="ShowMore();">Show more </a>

在頁面加載這兩個警報彈出。但點擊「顯示更多」時，只有警報（1）彈出。

瀏覽器控制檯沒有錯誤。

渲染HTML：

//with style applied to chkboxes on page load 
<div><span class="uncheked"></span><input type="checkbox" runat="server" id="406"> 
<label>Compare</label></div> 

//with no style applied to new chkboxes 
<div><input type="checkbox" runat="server" id="618"><label>Compare</label></div>

來源

2015-11-02 Qwerty

你已經寫了好幾遍'cheked'而不是'checked'這可能是原因嗎？ –

不，不是。我確定。這就是它在函數中定義的方式，它在頁面加載中工作正常。 – Qwerty

我不明白爲什麼，如果條件selectcheckBtn();是不正確的，新chkboxes。因此，爲複選框添加了一個新類，並編寫了此解決方法。現在調用這個函數而不是selectcheckBtn();在ajax代碼中，工作。

function StyleCheckBox() { 
     $(".chkBx").each(function() { 
      if ($(this).prev("span").length === 0) { 
       $("<span class='uncheked'></span>").insertBefore($(this)); 
      }    
      $("input:checkbox").click(function() { 
       check = $(this).is(":checked"); 
       if (check) { 
        $(this).prev("span").addClass("cheked").removeClass("uncheked") 
       } else { 
        $(this).prev("span").addClass("uncheked").removeClass("cheked") 
       } 
      }); 
      $("input:checked").prev("span").addClass("cheked").removeClass("uncheked") 
     });   
    }

來源

2015-11-02 07:03:15 Qwerty

ajax調用後沒有樣式的複選框

回答

相關問題