jQuery点击类事件触发多次点击

Question

我有许多带有“更多信息”类的图像项，它们应该响应单击事件并将 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)
            })
    })
});

Answer 1

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

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

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

请参阅文档中的 jQuery's load example。

或者你应该确保请求的结果只包含你需要的部分。

最后一个可能的解决方案是在加载内容之前.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);
        });
    });
});