代码之家 › 专栏 › 技术社区 › Mark Allison

如何将jQuery UI按钮应用于ASP.NET中的html按钮?

button jquery-ui jquery asp.net c#

Mark Allison · 技术社区 · 14 年前

我有一个名为btnShowTradeScreenshot的按钮的GridView。GridView创建了许多按钮,我想对它应用jQuery按钮。这是我的相关GridView代码:

<asp:GridView 
    ID="grdTrades" 
    runat="server" 
    >            
    <Columns>            
        <asp:TemplateField HeaderText="Screenshot" >
            <ItemTemplate>
                <input name="btnShowTradeScreenshot" runat="server" visible='<%# Eval("screenshotId") != DBNull.Value %>' type="button" value='View...' onclick='<%# "ShowImageInNewPage(\"App_Handlers/ImageHandler.ashx?screenshotId=" + Eval("screenshotId") + "\")" %>' />
            </ItemTemplate>
        </asp:TemplateField>            
    </Columns>
</asp:GridView>

我正试图使用以下代码应用jQuery:

<script type="text/javascript">
    $(document).ready(function () { $("#<%= btnShowTradeScreenshot.ClientID %>").button(); });
</script>

什么也没发生,我得到了标准按钮,而不是jQuery按钮。当我查看页面源代码时,我注意到按钮的名称已被损坏,例如:

ctl00$contentMain$grdTrades$ctl05$ctl03

ctl00$contentMain$grdTrades$ctl10$ctl03 等

对如何将jQuery应用到我的所有按钮有什么想法吗?

谢谢。

3 回复 | 直到 14 年前

Klemen SlaviÄ 14 年前

您可以在按钮上使用类名,而不是依赖ClientID;这样就节省了JavaScript的长度,并且不需要绑定到每个特定的控件。

在JS中:

// equivalent to $(document).ready(function() {
$(function() {
  $('.customButton').button();
});

在ASP.NET中:

<input type="button" runat="server" class="customButton" .../>

另外,如果您的网格是AJAX绑定的网格,则 <input/> 将重新创建元素,您需要在网格上重新运行代码以应用样式:

$('#<%= grdTrades.ClientID %> .customButton').button();

Darin Dimitrov 14 年前

尝试改用名称选择器:

$('input[name$=btnShowTradeScreenshot]').button();

或者更好地将CSS类应用于输入,然后:

$('.button').button();

sh54 14 年前

创建了许多按钮,ASP将为它们生成不同的ID,以确保每个按钮都具有唯一的ID。由于$(“35;…”)旨在选择单个唯一标识的元素,因此不能使用它来选择多个按钮。

尝试$(':button')选择所有按钮对象。或者,您可以将每个按钮的类设置为ShowTradeScreenshot,然后使用$('.ShowTradeScreenshot')选择它们。

推荐文章

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

7 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

7 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

7 年前

Paili · 如何在jQuery自动完成中添加其他内容?

7 年前

monu · 动态嵌套选项卡创建

7 年前

Tirkesh Turkesh · 可拖动行在jquery中不工作?

7 年前

Joe · WordPress-如何按字母顺序排列jQuery自动完成搜索建议结果,优先排序第一个字符,然后再排序第二个字符等。?

7 年前

Triwahyu Pamungkas Pribadi · 如何在可拖动停止时获取目标/类名

7 年前

pcCC28 · 如何基于jwt令牌身份验证保持用户登录。

7 年前

buggy1985 · 具有多个元素的jQuery UI Sortable抛出“TypeError:无法读取null的属性‘insertBefore’”

7 年前