helloxielan 2014-06-10 03:49 采纳率: 0%
浏览 214

$(this).data不起作用

I've researched for the past 2 hours and cannot get this to work.

I am loading content via ajax and $(this).data is not working for me at all. If I change this to the actual class, then the content does load, however this is a portfolio so every button has a different url to load.

HTML:

<a class="button" href="#project-full" data-work-item="portfolio-open.html">View Project</a>

JS:

var loadUrl = $(this).data('work-item');

$(".button").click(function(){
    $("#project-full").html(ajax_load).load(loadUrl);
      $("html, body").animate({ scrollTop: $('#project-full').offset(0,100).top }, 1000);
});

In theory, shouldn't the variable loadUrl grab the "portfolio-open.html" and pass it over to the loadUrl below? I am sure that I am missing something important, but from all the sources I've read this should work..

  • 写回答

2条回答 默认 最新

  • 零零乙 2014-06-10 03:51
    关注

    You need to put the loadUrl definition inside the click event handler, because $(this) should refer to the anchor element you've clicked:

    $(".button").click(function(e) {
        e.preventDefault(); // stop the default anchor action
        var loadUrl = $(this).data('work-item');
        $("#project-full").html(ajax_load).load(loadUrl);
          $("html, body").animate({ scrollTop: $('#project-full').offset(0,100).top }, 1000);
    });
    

    Don't forget to prevent the default anchor action (redirecting).

    评论

报告相同问题?