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调用后没有样式的复选框

回答

相关问题