[英]How to trigger click event if selector is loaded from external
有没有人有类似的经历？ 我想通过使用.load（“...”）函数将外部文件加载到当前页面。 加载后，如何触发<div id =“tab-3-list”>中图像的点击？
剧本
$("#tab-3-list img.coupon_list").on("click", function (e) {}
不起作用。 如果我将list.html的内容嵌入到当前正文中，则上述脚本可以正常工作。
<html lang="en" class="ui-mobile">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<section id="home" data-role="page">
<article data-role="content">
<div id="home-content"></div>
</article>
<!-- content -->
</section>
<!-- home -->
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
</script>
</body>
</html>
外部文件list.html
<div id="tab-3-list">
<div class="ui-grid-a">
<div class="ui-block-a">
<img id="c01" class="coupon_list" src="/images/coupon/c01.png">
</div>
</div>
<!-- /ui-grid-a -->
</div>
<!-- /tab-3-list -->
尝试在此上下文中使用event-delegation ，因为您在运行时加载DOM元素，
$("#home-content").on("click","#tab-3-list img.coupon_list",function (e) {
e.preventDefault();
alert(this.id);
});
试试这个..
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html", function(){
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
});
</script>
load使用ajax，因此需要一些时间从外部页面加载数据。 当您将click event附加到img.coupon_list ，它甚至不存在于DOM（页面中）中。
试试这个，
$("#home-content").load("list.html", function () {
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
仅当返回来自load数据并将其添加到DOM时，才会附加click 。
使用事件委托 - .on（） ，并触发单击事件使用.trigger（）
$(document).ready(function() {
$("#home-content").load("list.html",
function(){
$('#tab-3-list img.coupon_list').trigger('click');
});
$("#home-content").on("click","#tab-3-list img.coupon_list", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
-just put event in live mode , it's work after reload :
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#home-content").one("load",function(){
// everytime an image finishes loading
}).each(function () {
if (this.complete) {
// manually trigger load event in
// event of a cache pull
$(this).trigger("click");
}
});
$("#home-content #tab-3-list img.coupon_list").live("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
}); </script>
如何从JSDOM触发jQuery .on（'click'，选择器，回调）事件？
[英]How to I trigger a jQuery .on('click', selector, callback) event from JSDOM?
如何触发点击事件进入通过 Ajax 加载但未附加的 DOM
[英]How to trigger click event into DOM loaded through Ajax but NOT APPENDED
如何从HighCharts中的系列单击事件手动触发afterSetExtremes事件
[英]How to manually trigger the afterSetExtremes event from a series click event in HighCharts
是否可以在加载了来自其他域的第三方内容的iframe中触发点击事件？
[英]Is it possible to trigger a click event inside an iframe loaded with 3rd party content from another domain?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.