单击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>

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

我遵循了这个问题的选择答案，它似乎有最好的方法(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”)从不执行，如果它是愚蠢的，我会感到羞愧，因为它似乎没有正确地处理点击事件。当然，我得到了图像，但在一个新页面中(单击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
    ...
)};
...