修改

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（＆＃34;点击＆＃34;）永远不会执行，如果它是愚蠢的东西我会感到羞耻，因为它似乎没有处理正确点击事件。我当然得到了图像，但是在新页面中（单击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
    ...
)};
...

单击href后，jquery将图像加载到div

修改

2 个答案: