Having trouble capturing text of Data element using JQuery

JavaScript
1

I posted a similar question but wasn’t sure if I should have included it there, or start a new question. If I should have included in the same question, I will gladly do so.

ON a click event I want to bbuble up and capture the text from (data-mb-name) in the Div id = Hero-intro at the top of the HTML I included above.
the html is the following… this is just a snippet, but is the portion of the HTML that I am concerned with.

<div id="hero-intro" class="col-sm-7 col-sm-offset-1">
                <h1 id="mb-name" data-mb-name="Ann Arnesen">Ann Arnesen</h1>
                <h3 id="hero-Title"><span>Sr. Mortgage Banker</span> | <span>NMLS #453374</span></h3>
                <!-- #hero-title -->
                <div class="sep-short-blue"></div>
                
                                <h5 id="hero-rating">Overall Satisfaction Rating:
                    <span class="rs rating-stars"><i class="fa fa-star fa-star-full"></i> <i class="fa fa-star fa-star-full"></i> <i class="fa fa-star fa-star-full"></i> <i class="fa fa-star fa-star-full"></i> <i class="fa fa-star fa-star-full"></i></span> <span class="rs rating-percent">5 out of 5</span>                </h5>
                                <!-- #hero-rating -->
                
                <p id="hero-intro-text">With over 10 years in the mortgage industry, Ann Arnesen has helped over 1,100 families achieve their dream of owning a home. The majority of Ann’s clients are repeat customers.</p>
                <!-- #hero-intro-text -->
                
                <div id="hero-readmore"><a href="#biography" data-toggle="modal">Read full bio...</a></div>
                <!-- #hero-readmore -->
                
                <div id="hero-btn-group"> 
                <a class="btn-ghost-white btn-left page-scroll" href="#social-c">CONTACT ME</a>
                                    <a class="btn-ghost-white btn-right" href="https://www.secureloandocs.com/apply.php?id=36309094&amp;loId=16167" target="_blank">APPLY ONLINE</a>
                                </div>
                <!-- #hero-btn-group --> 
            </div>

this is the JQuery script I wrote, but is not working correctly. Basically on the click event I want to capture the data-mb-name attribute → in this case it would be Ann Arnensen.

$('.hero-btn-group a').click(function() {
  var getElement = $(this).parents('Div:has(#hero-btn-group'));
  
  if (getElement.length) {
    // Do something here
  s.eVar52 = ( getElement.attr('data-mb-name')); 
   console.log(s.eVar52); 
 
  } else {
    // Don't follow the link
    return false;
  }
});

I’ve also tried the following

$('div:has(#hero-btn-group)').click(function() {
  var getElement = $(this).parents('div:has(#hero-intro)');

$('div:has(#hero-btn-group) a').click(function() {
  var getElement = $(this).parents('div:has(#hero-intro)');

$('div:has(#hero-btn-group a)').click(function() {
  var getElement = $(this).parents('div:has(#hero-intro)');

Nothing seems to work. @m3g4p0p

2

First make sure that you’re getting the correct reference. With your initial code for example, the closing quote and parenthesis were the reverse of what they should be.

var getElement = $(this).parents('Div:has(#hero-btn-group')); // bad
var getElement = $(this).parents('Div:has(#hero-btn-group)'); // good

So you now have a reference to the hero intro div. That doesn’t get you to the H1 element that has your data reference. I also renamed getElement to heroIntro, to help make the code less confusing.

Once we have the heroIntro, we can easily get the H1 element with $("h1", heroIntro)

s.eVar52 = $("h1", heroIntro).attr('data-mb-name');

jQuery lets us get the data value more directly though, which can be easier to read too:

s.eVar52 = $("h1", heroIntro).data('mb-name');

After putting in an s variable with an empty object, the resulting code is:

var s = {};
$('#hero-btn-group a').click(function() {
  var heroIntro = $(this).parents('div:has(#hero-btn-group)');

  if (heroIntro.length) {
    s.eVar52 = $("h1", heroIntro).attr('data-mb-name');
    console.log(s.eVar52);

  } else {
    // Don't follow the link
    return false;
  }
});

The test code for this can be found at https://jsfiddle.net/goazf7h9/

3

Why didn’t these ones work?

The click event triggers whenever you click anywhere inside the hero intro. The this keyword refers directly to that hero-intro div.

The click event works this time, but the hero-intro div has no parent div that contains it.

A more specific has condition, but still results in the click event being correctly triggered. The getElement assignment has the same troubles as the previous one.

4

Thanks @Paul_Wilkins for be patient and willing to teach. I will study this for better understand. I greatly appreciate your time.

5

I used the following and it worked well for my needs…

$('#hero-btn-group a').click(function() {
  var heroIntro = $(this).parents('div:has(#hero-btn-group)');

  if (heroIntro.length) {
    s.eVar52 = $("h1", heroIntro).attr('data-mb-name');
    console.log(s.eVar52);
 
  } else {
    // Don't follow the link
    S.eVar52 = "Contact Me"
    return false;
  }
});

Thanks @Paul_Wilkins

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.