Question

我是JqueryMobile的新手。我想在按钮上尝试一个简单的点击事件，但它不起作用（我在firefox中使用它）

HTML

<!DOCTYPE html>
<html dir='ltr'>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="/css/style.css"/>
<script src='js/jquery.mobile.js'></script>
<script src='js/script.js'></script>
</head>
<body> 
    <div data-role="page" id='mypage'>  
        <button id='load_ajax'>Carica</button>
        <br />
        <div id='content'></div>
    </div><!-- /content -->
</body>
</html>

并且script.js中的脚本是

$('#mypage').delegate('#load_ajax','click',function (e) {
    alert('test'); 
});

即使使用调试器，也不会弹出警告。

Answer 1

我认为问题在于，当您的代码调用.delegate（）时，页面上不存在所选元素。此外，请检查JS文件是否已正确加载。

以下代码包含您发布的代码正常运行：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    </head> 
    <body>
        <!-- /page -->
        <div data-role="page" id='mypage'>  
            <div id='content'>
                <button id='load_ajax'>Carica</button>
            </div>
        </div>
        <script type="text/javascript">
            $('#mypage').delegate('#load_ajax','click', function (e) {
                alert('test'); 
            });
        </script>
    </body>
</html>

此外，如jQuery API中所述：

从jQuery 1.7开始，.delegate（）已被.on（）方法取代。但是，对于早期版本，它仍然是使用事件委派的最有效方法。

事件处理程序仅绑定到当前选定的元素，它们必须存在于您的代码调用到.on（）时页面上。为确保元素存在且可以选择， 在文档就绪处理程序 内为页面上HTML标记中的元素执行事件绑定。如果要将新HTML注入页面，请选择元素并在将新HTML放入页面后附加事件处理程序。或者， 使用委托事件 来附加事件处理程序。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。 在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备好。

阅读上述内容后，您可以考虑将代码更改为：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).on('click', '#load_ajax', function(e){
                // your code
                alert($(this).text());
            });
        </script>
    </head> 
    <body>
        <!-- /page -->
        <div data-role="page" id='mypage'>  
            <div id='content'>
                <button id='load_ajax'>Carica</button>
            </div>
        </div>
    </body>
</html>

jquerymobile点击事件不起作用

1 个答案: