简单.Show函数不会在页面加载时显示DIV

问题描述：

我的页面上有一个复选框“cbxShowNotifications。”如果在页面加载时检查它，我想显示“treeview”。简单.Show函数不会在页面加载时显示DIV

.aspx页面中：

<html> 
     <body> 
     <form> 
      <asp:CheckBox ID="cbxShowNotifications" runat="server"/>Show Notifications 
      <div id="treeview"></div> 
     </form> 
     <script src="../Scripts/jquery.min.js" type="text/javascript"> </script> 
     <script src="../Scripts/kendo.web.min.js" type="text/javascript"> </script> 
     <script src="../Scripts/NotificationsTreeView.js" type="text/javascript"> </script> 
     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       showOrHide(); 
      }); 
     </script> 
     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       CreateNotificationTree(<%= UserId.ToString(CultureInfo.InvariantCulture) %>); 
      }); 
     </script> 
    </body> 
</html>

JavaScript文件：

function CreateNotificationTree(userId) 
{ 
    var data = new kendo.data.HierarchicalDataSource({ 
     transport: { 
      read: { 
       url: "../api/notifications/byuserid/" + userId, 
       contentType: "application/json" 
      } 
     }, 
     schema: { 
      model: { 
       children: "notifications" 
      } 
     } 
    }); 

    $("#treeview").kendoTreeView({ 
     dataSource: data, 
     loadOnDemand: true, 
     dataUrlField: "LinksTo", 
     checkboxes: { 
      checkChildren: true 
     }, 
     dataTextField: ["notificationType", "NotificationDesc"], 
     select: treeviewSelect 
    }); 

    function treeviewSelect(e) 
    { 
     var node = this.dataItem(e.node); 
     window.open(node.NotificationLink, "_self"); 
    } 
} 

$('#cbxShowNotifications').on('change', function() 
{ 
    debugger; 
    var tview = $('#treeview'); 

    if ($(this).prop('checked')) 
    { 
     tview.show(); 
    } 
    else 
    { 
     tview.hide(); 
    } 
}); 

function showOrHide() 
{ 
    debugger; 
    var tview = $('#cbxShowNotifications'); 

    if ($(this).prop('checked')) 
    { 
     tview.show(); 
    } 
    else 
    { 
     tview.hide(); 
    } 
}

的问题是，当页面加载和复选框被选中，树视图是不可见的。我究竟做错了什么？

顺便说一下，页面加载后，如果我取消选中复选框，树会消失，如果我检查它，它会出现。

所以这只发生在页面加载，这导致我相信这是一个什么时候事情正在执行的问题。

答

在功能showOrHide

变化：

if ($(this).prop('checked'))

到

if ($('#cbxShowNotifications').prop('checked'))

的this值不是一个复选框。

这实际上做到了。谢谢！ –

答

复选框cbxShowNotifications是一个.net服务器控件。所以，ID不会保持不变。观察在DOM的变化，该ID获取与页面&控制信息，即类似“master_ctrl_cbxShowNotifications”

东西，我建议你添加一个类它&使用类作为前缀选择。

<asp:CheckBox ID="cbxShowNotifications" CssClass="chkBoxNotif" runat="server"/> 

$('.chkBoxNotif').on('change', function(event) { 
    //Do something 
});

感谢克里希纳，但林发现更容易的解决方案... –

简单.Show函数不会在页面加载时显示DIV

相关推荐