asp.net - Link JQuery click methodto Button click event

Question

On my web page I have a button, and some JQuery code. The problem is that when I click the button, the JQuery code is not executed. Clicking the button still does a postback, and seems to ignore the JQuery code. Here is my button:

<button id="btnCancel" class="button" runat="server" ><span>Cancel</span></button>

Here is my JQuery Code:

 $(document).ready(function () {
    $('#btnCancel').click(function () {
        alert('hello');
    });
});

what I would like to achieve is that when the button is clicked, a message must be displayed showing "Hello". Am I missing something here?

score 0 · Accepted Answer

人们在这里所说的将起作用。确保你已经把所有的部分放在一起。

添加 jQuery

<head>
 ....
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
</head>

添加您的代码

<button id="btnCancel" class="button" runat="server" ><span>Cancel</span></button>
<script type="text/javascript">
     $(document).ready(function () {
         $('#<%= btnCancel.ClientID %>').click(function () {
             alert('hello');
             return false;
         });
     });
</script>

我添加了一个“return false;” 如果您只想运行 javascript，则可以在其中防止页面回发。

score 0 · Accepted Answer

由于当页面呈现时，控件的 id 被更改为其他内容，我认为您需要使用

$('#<%=btnCancel.ClientID %>').click();

或者

<button id="btnCancel" class='btnCancel' text="cancel"></button>


$(document).ready(function () {
    $('.btnCancel').click(function () {
        alert('hello');
    });
});

score 0 · Accepted Answer

脚本没问题。请检查您是否正确加载了 jQuery。使用任何开发工具，例如 firebug。

在标题中添加这样的 JQuery。

在您的页面中添加 jQuery 文件，如下所示，其中 Scripts 是文件夹并且jQuery.js是 jQuery 文件。如果您已经将其包含在您的页面中，请使用任何开发人员工具检查它是否正确加载。

<header>    
    <script src="Scripts/jQuery.js" type="text/javascript"></script>    
</header>
<body>
   <button id="btnCancel" text="cancel"></button>
</body>

或者从 CDN 添加 jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

编辑：我认为您需要vsdocjQuery 版本的文件。请检查以下链接，它应该可以直接工作。如果你想下载它，只需复制并保存为jquery-1.8.2-vsdoc.js文件。

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2-vsdoc.js

asp.net - Link JQuery click methodto Button click event

3 回答 3

Related

Reference