单击href后jquery将图像加载到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>

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

我按照这个问题的选定答案，似乎有最好的方法 (Can I get the image and load via ajax into 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") 永远不会执行，如果它很愚蠢，我会感到羞耻，因为该函数似乎没有正确处理单击事件。 我当然得到了图像，但是在一个新页面中（单击 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
    ...
)};
...