Why is .attr('title') grabbing the previous element's title

Question

UPDATE Flexslider has a bunch of callback spaces for use which make this possible.

after: function(){},            //Callback: function(slider) - Fires after each slider animation completes

Thanks everyone

LIVE CODE:
I uploaded the live code for debugging; for making a jsfiddles of this would be rather difficult.

Problem: The function fetchTitle() grabs the previous image title and not the most current?

Explanation: I have a function falled fetchTitles() which takes a title tag from a the active slide from flexslider and places it into a varible targetTitle. Then replaces h1.head_line with the targetTitle

Script:(paired down from full script please view live code for full)

 function fetchTitles() {
       var targetTitle = $('.flex-active-slide').find('img').attr('title');

        $('.head_line').text(targetTitle);

    }

HTML

  <li class="flex-active-slide">
    <article class="active_work" title="Facebook + Like Pillow">
      <figure> <img title="Facebook + Like Pillow" src="asset/img/1600/slide1_1600.jpg" />
        <figcaption class="sliderCaptions">
          <h1>
            <div class="animate_text"></div>
            <a href="https://plus.google.com/104865624796200130935/" ><span>Author:</span> Matthew Harwood</a></h1>
        </figcaption>
      </figure>
      <section class="article_post"></section>
    </article>
  </li>

Addition Information:

If you click on the links twice you'll see that the title will update itself.
The fetch title on document ready comes up unidentified even tho there is an .flex-active-slide ready.
The scripts are at the bottom of the source in a script2.js

More than likely the class isn't instantly added, therefore it hasn't updated at the time of your click event. Try instead using an event within the flexslider plugin if one exists. Start with the documentation, http://flex.madebymufffin.com/index.html -> Advanced tab — Kevin B, Jul 11 '12 at 19:43
`making a jsfiddles of this would be rather difficult` -- you really should be able to craft a [Short, Self-Contained, Correct Example](http://meta.stackexchange.com/questions/22754/sscce-how-to-provide-examples-for-programming-questions) of the issue; often I've found that doing that sometimes helps me solve the problem. — saluce, Jul 11 '12 at 19:45
It's not just a timer issue. If you wait - there is a state not being set when the animation finishes. When you click again, the title changes. What's the logical sequence needed? — MyStream, Jul 11 '12 at 19:50
fetchTitles() is being called before the next image is scrolled, so the image that's found is the one that was active before you clicked on the next image. — scott.korin, Jul 11 '12 at 19:57
So what happens when the code changes on your live link? If we can't see the entire problem here, it's hard for us to help you, and it means this question is Too Localized. Please ensure your question is complete for purposes of others helping you debug. — George Stocker, Jul 13 '12 at 02:33

score 1 · Answer 1 · answered Jul 11 '12 at 19:43

1

Use $.prop instead:

var targetTitle = $('.flex-active-slide').find('img').prop('title');

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

answered Jul 11 '12 at 19:43

Mattias Buelens

19,609
4
45
51

it's accually still doing it but good catch i'll upload the new code with prop – Armeen Moon Jul 11 '12 at 19:46
3

According to the table on the blog post for 1.6.1, the title should still be accessed with .attr http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/ – Kevin B Jul 11 '12 at 19:46
Dangit, you're right, it still works the same for both. Still, a fiddle would help a *lot*. – Mattias Buelens Jul 11 '12 at 19:50
The html he gave us has a "title" *attribute* on the image, so why should he use .prop? – Bergi Jul 11 '12 at 19:53
Good explanations also [here](http://stackoverflow.com/questions/5874652/prop-vs-attr). – Stano Jul 11 '12 at 19:54

score 1 · Accepted Answer · answered Jul 11 '12 at 19:55

1

It is indeed a problem with timing. If I introduce setTimeout, the problem is gone

function fetchTitles() {
       setTimeout(function()
       {
            var targetTitle = $('.flex-active-slide').find('img').attr('title');

            $('.head_line').text(targetTitle);

       },200);
    }

answered Jul 11 '12 at 19:55

algiecas

2,108
14
13

I accually perfer this method it's way faster than using woothemes callbacks. – Armeen Moon Jul 11 '12 at 20:07

score 1 · Answer 3 · answered Jul 11 '12 at 19:57

It looks like the class isn't updating until after the slide animation has finished, but fetchTitles is running as soon as you click, so the image with the 'flex-active-slide' class is still the previous image.

You may want to look into running fetchTitles in a callback function so it runs after the slide has completed.

Why is .attr('title') grabbing the previous element's title

3 Answers3