1

クリックイベントに応答してajaxコンテンツをdivにロードする必要があるクラス「more-info」の画像アイテムがいくつかありますが、これは初めて検出されますが、他の画像を2回目にクリックすると、 3回目の2回のクリックをトリガーし、3回のクリックをトリガーします。

これがhtmlです：

<div id="test" style="display:none"></div>

<div class="image-item">
    <img class="more-info" src="/site/uploads/documents/_thumb01.jpg"  path="/site/auto/1" />
</div>
<div class="image-item">
    <img class="more-info" src="/site/uploads/documents/_thumb02.jpg" path="/site/auto/2" />
</div>
<div class="image-item">
    <img class="more-info" src="/site/uploads/documents/_thumb03.jpg" path="/site/auto/4" />
</div>

そしてajaxhanddler：

  $(function () {  
    $('.more-info').click(function(event) { 
            event.preventDefault()

            url = $(this).attr('path');
                $('#test').load(url, function(){
                alert('loaded: '+ url)
            })
    })
});
4

1 に答える 1

1

javascriptを含むhtmlページ全体を再度ロードしていると思います。したがって、クリックするたびに、別のイベントハンドラーが追加されます。

したがって、ページ全体をロードする代わりに、ページの特定の部分のみをロードできます。

$('#test').load(url + ' #somediv', function(){

ドキュメントのjQueryのロード例を参照してください。

または、リクエストの結果に必要な部分のみが含まれていることを確認する必要があります。

最後に考えられる解決策は.unbind()、コンテンツをロードする前のイベントです。

$(function () {  
    $('.more-info').click(function(event) { 
        event.preventDefault();

        // for caching the element, because it will be referenced twice
        var $elem = $(this);

        url = $elem.attr('path');

        $elem.unbind('click');
        $('#test').load(url, function() {
            // used console.log which is cleaner imho
            console.log('loaded: '+ url);
        });
    });
});
于 2012-08-26T13:39:04.780 に答える