Question

我正在使用本教程：

http://www.devinrolsen.com/jquery-image-swapping-with-fade-effect/

但我不能让它发挥作用。我认为这与我的其他剧本存在冲突。

我有一个目录，在catalogue.php中输入所有jquery动作。然后是reader.php，它显示目录或单个页面。我有simpletabs jquery脚本活动。

现在我尝试像上面的教程中那样实现jquery图像交换。

但是图像点击的事件根本没有开始。我尝试了教程中的所有代码，但它不起作用，它只是在窗口中加载图像。

所以我正在尝试调试它，只是为了显示一个警告框：

$("a.img_thumb").on("click", function (e) {
    alert('Works!');
});

但警报未触发。（虽然其他javascript正在运行，制表符，加载程序等。）

我也试过了：

$(function(){
    $("a.img_thumb").on("click", function (e) {
        alert('Works!');
    });
});

现在我也尝试了这个：

$(document).ready(function() {
    $("a.img_thumb").on("click", function (e) {
        alert('Works!');
    });
});

这些都是我在catalogue.php中的jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/simpletabs_1.3.js"></script>
<script>
    $(document).bind('ajaxStart', function(){
        $('#loading').css("display", "block");
    }).bind('ajaxStop', function(){
        $('#loading').css("display", "none");
    });
    function show_object(itemid,object_type){
        var request = $.ajax({
            url: "reader.php",
            type: "GET",
            data: "id="+ itemid,
            dataType: "html"
        });
        $('table.object_list_' + object_type).hide();
        request.done(function(msg) {       
            $('div.show_object_' + object_type).append(msg);       
        });
        request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    };
    $("a.img_thumb").on("click", function (e) {
        alert('Works!');
    });
</script>

以下是源代码的一部分，图像是从xml文件动态创建的

    <a href="http://domain.com/itemimages/img50293090.jpg" class="img_thumb">
<img src="http://domain.com/itemimages/img50293090.jpg" alt="pic" class="thumbnail"></a>

谢谢，我不知道错误在哪里

其他信息

两个脚本catalogue.php和reader.php构建了一个目录。名称不好，因为catalogue.php除了有一些css和jquery之外别无其他。这是catalogue.php的整个脚本：

<?php
//If needed, paste
header('Content-Type: text/html; charset=utf-8');
?>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/simpletabs_1.3.js"></script>
    <script>
        $(document).bind('ajaxStart', function(){
            $('#loading').css("display", "block");
        }).bind('ajaxStop', function(){
            $('#loading').css("display", "none");
        });
        function show_object(itemid,object_type){
            var request = $.ajax({
                url: "reader.php",
                type: "GET",
                data: "id="+ itemid,
                dataType: "html"
            });
            $('table.object_list_' + object_type).hide();
            request.done(function(msg) {       
                $('div.show_object_' + object_type).append(msg);       
            });
            request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
            });
        };
        $(document.body).on("click", "a.img_thumb", function (e) {
            alert('Works!');
        });

    </script>

    <style type="text/css" media="screen">
        @import "css/simpletabs.css";
    </style>
    <style type="text/css">
        #loading {
            display:none;
            position:absolute;   
            left:30px;   
            top:90px;   
            z-index: 1000;          
        }
        img.list_image {
            heigth:90px; 
            width:90px;
        }
        td.list_info {
            width:150px;
        }
        p.tab_header {
            font-weight:bold;
        }
        table.infotable {
            width:800px;
        }
        td.key {
            width:200px;
        }
        td.value {
            width:400px;
        }
        #show_info {
            width:50%;
            float:left;
        }

        #show_pictures {
            width:50%;
            float:right;
        }
        #show_maplinks {
            width:100%;
            clear:all;
        }
        #main_image {
            width:200px;
            margin:3px;
        }
        #thumbs {
            width:200px;
        }
        img.thumbnail {
            max-width:60px;
            max-height:60px;
            margin:3px;
            float:left;
        }
    </style>
</head> 
<body>
    <div id="catalogue" class="simpleTabs">
        <img src="loading.gif" id="loading"/>
<?php
include('reader.php');
?>
    </div>

如果未设置$ _GET ['id']，reader.php将显示包含项目的列表。如果设置了GET，那么它会显示包含大量数据和图像的单个项目。

reader.php差不多是1000行，所以我不会在这里发布。

但是，正如评论中所讨论的那样。可能是问题是某种程度上，因为当用户点击列表中的一个项目时，图像加载了ajax？因此初始加载时图像不存在

终于我得到了一些工作，感谢大家！

在创建图像的reader.php中，我添加了一个onclic函数：

<div id="thumbs">
    <?php foreach ($original_images as $image) { ?>
    <a href="<?php echo $image['url'] ?>" class="img_thumb">
        <img src="<?php echo $image['url'] ?>" alt="kuva" class="thumbnail" onclick="alertme()"/>
    </a>
    <?php } ?>
</div>

jquery看起来像这样：

function alertme() {
    alert('Works!');
};

这很有效。怎么样？

Answer 1

如果该片段来自您的HEAD，那么您就错过了“onload”事件。也改变你的代码片段：

function show_object(itemid,object_type){
    var request = $.ajax({
        url: "reader.php",
        type: "GET",
        data: "id="+ itemid,
        dataType: "html"
    });
    $('table.object_list_' + object_type).hide();
    request.done(function(msg) {       
        $('div.show_object_' + object_type).append(msg);       
    });
    request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });
};
$(function() {  //  $(document).load(function....
    $(document).bind('ajaxStart', function() {
        $('#loading').css("display", "block");
    })
    .bind('ajaxStop', function(){
        $('#loading').css("display", "none");
    });
    $("a.img_thumb").on("click", function (e) {
        alert('Works!');
    });
})

此外，这可能是一个“时机”问题。可能是您的代码在HTML被“写入”文档正文之前运行。为了测试它，只需将work包装在计时器中并运行它。等待时间，然后查看事件是否触发。

$(function() {
    setTimeout(function() {
        $(document).bind('ajaxStart', function() {
            $('#loading').css("display", "block");
        })
        .bind('ajaxStop', function(){
            $('#loading').css("display", "none");
        });
        $("a.img_thumb").on("click", function (e) {
            alert('Works!');
        });
    }, 3000);   //  3 second timer, this event won't be set till 3 seconds after the page is loaded
})

如果这是一个计时问题（在事件监听器设置之后加载动态数据），那么只需转到加载新HTML的位置，然后将事件代码放在那里。在加载和编写所有新HTML之后，请确保将其放在最后。

您可能会做的另一件事是使用delegate的{{1}}面。这应该将事件.on()添加到偶数click。这通常是我最后的选择，因为我喜欢控制精确定位元素事件，但这是一种在一个地方维护代码的“干净”方式。

Using .delegate()

dynamic content

Answer 2

为避免为尚不存在的对象创建eventlistener，您可以在父对象（body上创建侦听器，或者更近的对象会更好）

尝试一下：

$(document.body).on("click", "a.img_thumb", function (e) {
    alert('Works!');
});

在这种情况下，侦听器已添加到正文中，它已针对点击事件进行了注册，但仅当点击事件位于a.img_thumb内的body时才会注册。这样，当您添加侦听器时，链接不一定存在。

文档加载后jquery交换动态图像

2 个答案:

Using .delegate()