Question

这段代码有什么问题？

<!DOCTYPE html> 
<html> 
<head> 
    <title>WebService Example</title>         
    <meta name="viewport" content="width=device-width, initial-scale=1">             
        <link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
        <script src="jquery.js"></script>
        <script src="jquery.mobile-1.0.1.min.js"></script>            
        <script type="text/javascript">                
            $("#Btn").click(function (event) {
                    alert("Button Clicked");                             
                });                                                         
        </script>            
</head> 
<body>         
    <div data-role="page">
        <div data-role="header" data-nobackbtn="false">
            <div><a href="index.html">Back</a></div>
        </div>                        
        <div data-role="content">
            This is the content
        </div>                        
        <div data-role="footer">                    
            <a href="#" data-role="button"
                    data-icon="info" id="Btn">Button</a>
        </div>            
    </div>        
</body>

Answer 1

代码在DOM准备好之前运行。将它放在DOM ready事件处理程序中：

$(document).ready(function() {
    //Code that interacts with the DOM (such as binding event listeners...)
    $("#Btn").click(function (event) {
        alert("Button Clicked");                             
    }); 
});

Answer 2

将脚本放在正文后面，以便浏览器在找到按钮后附加事件。

或将其放入document.ready。

jQuery Button没有被点击

2 个答案: