Question

我有许多带有'more-info'类的图像项，它们应该响应click事件并将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 handdler：

  $(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);
        });
    });
});

JQuery点击类事件会触发多次点击

1 个答案: