1

私はこのチュートリアルを使用しています：

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 の 2 つのスクリプトは、カタログを作成します。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 行近くあるので、ここには掲載しません。

しかし、コメントで議論されているように。ユーザーがリストの 1 つの項目をクリックすると、画像が ajax で読み込まれるため、問題が何らかの形である可能性がありますか? そのため、画像は初期ロード時に存在しません

最後に、皆さんのおかげで何かがうまくいきました！

画像が作成されるreader.phpに、onclic-functionを追加しました:

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

そして、これは機能します。これはどう？

4

2 に答える 2

0

まだ存在しないオブジェクトのイベントリスナーを作成しないようにするには、親オブジェクト ( body、またはより近いオブジェクトの方がよいでしょう) でリスナーを作成できます。

これを試してください：

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

この場合、リスナーは本体に追加され、クリック イベント用に登録されますが、クリック イベントがa.img_thumb内にある場合のみですbody。この方法では、リスナーを追加するときにリンクがまだ存在している必要はありません。

于 2013-05-01T12:15:44.137 に答える