jQuery单击href后将图像加载到div

Question

我知道这里已经被问过很多遍了，实际上我发现了很多问题，每个问题都有很好的答案，我也遵循这些答案，使用了发现的不同方法，但仍然无法解决。

我想做的是单击链接后将图像加载到div中，而不是重定向到新页面。

我正在使用Pure Css（ http://purecss.io/ ）创建菜单，该菜单由一个列表组成，并且每个列表项内部都有一个链接，如下所示：

<div class="pure-menu pure-menu-open" id="vertical-menu">
     <a class="pure-menu-heading">Models</a>
     <ul id="std-menu-items">
         <li class="pure-menu-heading cat">Menu heading</li>
         <li><a href="path_to_image"  class="model-selection">Model 1</a></li>
     </ul>
</div>

在同一个html文件中，我还有另一个div想要加载图像：

<div id="model-map"></div>

我在单独的js文件中尝试了以下方法，使用jquery：

我选择了这个问题的答案，这似乎是最好的方法（ 我可以获取图像并将其通过Ajax加载到div中 ） 吗？

$(document).ready(function(){
    console.log("ready"); //this shows on console
    $('.model-selection').click(function () {
        console.log("clicked"); //this doesn't show after clicking
        var url = $(this).attr('href'),
        image = new Image();
        image.src = url;
        image.onload = function () {
            $('#model-map').empty().append(image);
        };
        image.onerror = function () {
            $('#model-map').empty().html('That image is not available.');
        }

        $('#model-map').empty().html('Loading...');

        return false;
    });
});

如您所见，console.log（“ clicked”）永远不会执行，如果它有点愚蠢，我会感到ham愧，因为它似乎无法正确处理click事件。 我当然得到了图像，但是在新页面中（单击href的默认行为），我希望它在div上加载而不被重定向。 我希望你能帮助我。 提前致谢！

编辑

上面的代码有效，并且两个答案都正确，该问题是由于我的html标签中的一些代码（用于创建菜单的下拉菜单的YUI代码）引起的，并且与我的js文件冲突。 我将其移至实际的js文件，现在可以正常使用了。 谢谢！

Answer 1

您需要使用event.stopPropagation（）;

$('.model-selection').click(function( event ) {

    event.stopPropagation();
    // add your code here

});

Answer 2

您只需要防止将<a>标记移到新页面的默认行为，首先要说e.preventDefault() ：

...
$('.model-selection').click(function (e) {
    e.preventDefault(); // Stops the redirect
    console.log("clicked"); // Now this works
    ...
)};
...