如果选择器是从外部加载的，如何触发单击事件

How to trigger click event if selector is loaded from external

本文关键字：何触发 单击 事件 选择器 从外部 加载 如果      更新时间：2023-09-26

有人有类似的经历吗?我想通过使用.load("…")函数加载一个外部文件到当前页面。加载后，如何触发点击

中的图像?

脚本

$("#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);
});

try this. 

<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>
相关文章：