Question

我想要一些样式为the way JQuery does it的单选按钮。我现在已经有了演示代码，可以在最小的HTML页面中显示，但我现在需要在ASP.NET C＃页面中执行此操作。以下代码工作正常，其中REDACTED指向本地网络服务器：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>

    <!-- CSS -->
    <link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

    <!-- JQuery -->
    <script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
  </div>
</form>
</body>
</html>

但以下显示了普通的，非JQuery风格的单选按钮。日期选择器工作（显示JQuery正在运行）并且消息显示为弹出窗口并显示在控制台中，显示该函数正在运行，但按钮未被设置为样式

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="travel_temp.aspx.cs" Inherits="_idx" %>
<!DOCTYPE html>

<html>
<head id="hgs_head" runat="server">
    <meta charset="utf-8">
    <title>JQuery Test</title>

    <!-- The following links have been commented out. The internal links point to copies of JQueryUI files that exist and are freshly downloaded from the makers' site. -->
    <!-- CSS -->
    <link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

    <!-- JQuery -->
    <script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>

    <!-- Radio button styling -->
    <script>
        $(function () {
            console.log("ready!");
            alert("Hi!");
            $("radio").buttonset();
        });
    </script>
</head>

<body id="hgs_body" runat="server">
    <p>Date Picker using JQuery:</p>
    <input type="text" name="date" id="date"><script>$("#date").datepicker();</script>

    <!-- MAIN CONTENT -->
    <div id="main">
        <p>Radio Buttons using JQuery:</p>
        <form class="messages" id="messages" runat="server">
            <asp:ScriptManager ID="ScriptManager" runat="server"/>
            <div id="radio">
                <input type="radio" id="radio1" name="radio"><label for="radio1">Twilight</label>
                <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Dash</label>
                <input type="radio" id="radio3" name="radio"><label for="radio3">Rarity</label>
            </div>
        </form>
    </div>
</body>
</html>

我认为问题与这个页面是ASP.NET有关，而按钮是通过.aspx页面创建的（顺便提一下，.aspx.cs页面是为了演示目的而被删除的）。但是使用＆＃34; $（功能＆＃34;它只会在页面完全组装后运行，因此单选按钮应该已经存在。

我需要做什么才能使样式有效？

（后续注释：我在这个例子中没有这样做，但实际的按钮是ASP.NET代码。但问题不是这样;请参阅答案。如果你这样做了有相同的问题请注意，如果页面更新，您显然需要调用JQuery函数再次设置样式。）

Answer 1

在页面加载期间，您将buttonset属性分配给类型为tag : radio的元素。您的DOM中不存在此类元素。您需要将div定位到要应用按钮组的位置。简而言之，您在选择器中缺少'#'。

$(function () {
            console.log("ready!");
            alert("Hi!");
            $("#radio").buttonset();
        });

ASP.NET中的JQuery单选按钮（C＃）

1 个答案: