$（this）.data不起作用

Question

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..

Answer 1

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).

Answer 2

Here is what your code should be:

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