1

我有许多带有“更多信息”类的图像项，它们应该响应单击事件并将 ajax 内容加载到 div，但是这是第一次找到，但是当我第二次单击任何其他图像时，它第三次触发 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>

和 ajax 处理程序：

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

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

1 回答 1

1

我认为您正在再次加载整个 html 页面，包括 javascript。因此，对于每次单击，您都会添加另一个事件处理程序。

因此，您只能加载页面的特定部分，而不是加载整个页面：

$('#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 回答