Question

有没有人有类似的经历？我想通过使用.load（“...”）函数将外部文件加载到当前页面。加载后，如何触发＆lt; div id =“tab-3-list”＆gt;中的图像点击？

脚本

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

Answer 1

尝试在此上下文中使用event-delegation，因为您在运行时加载DOM元素，

$("#home-content").on("click","#tab-3-list img.coupon_list",function (e) {
  e.preventDefault();
  alert(this.id);
});

Answer 2

试试这个..

<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>

Answer 3

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);
        });
});

仅当来自click的数据被返回并添加到DOM时才会附加load。

Answer 4

使用事件委派 - .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);
    });
});

Answer 5

-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>

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

5 个答案: