jQuery：从用户控件捕获单击事件

Question

I've got UserControl with button. I'm trying to catch click event of this button using jQuery. My code in ascx:

<link type="text/css" href="css/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="js/myjQueryCode.js"></script>

<button id="test-button">Test</button>

Code in myjQueryCode.js.

I've tried this:

$('#test-button').bind('click', function() {
    alert("123");
});

and this:

$("[id$=test-button]")
    .button()
    .click(function() {
        alert("123");
});

and this:

$('#test-button')
    .button()
    .click(function() {
        alert("123");
});

Nothing is work.

Answer 1

Have you tried to put your code iside the $(document).ready() ? Try this:

$(document).ready(function(){

    $('#test-button').bind('click', function() {
        alert("123");
    });

});

Answer 2

It should just be:

$('#test-button').click(function () {
    console.log('Click activated.');
});

Make sure that the code can actually execute. For example, wrap the statement in an executed function like so:

(function () {
    // Write code here
}());

Or execute once the document is ready, like so:

$(document).ready(function () {
    // Write code here
});

Answer 3

尝试将脚本代码放在html代码之后-也许这会有所帮助...

Answer 4

Your jQuery code is being executed before the element exists (because the <script> tag is before the HTML for your button), so you'll need to wrap it in a DOM ready event handler. Like so:

$(document).ready(function() {
    $('#test-button').bind('click', function() {
        alert("123");
    });
});

For further information, look at the API documentation for the .ready() function and the Getting Started with jQuery tutorial.

Answer 5

Your first approach using jQuery, and not referencing .button() works in jsfiddle: http://jsfiddle.net/Cd5Qj/

So it's likely that either you've got the wrong path to the jQuery library in your script tag, or you're not including the code inside a jQuery block like:

$(function(){
  ... //code here
});

...or there's some conflict we can't examine because there's more code you haven't displayed here.