First the webpage is http://atlanticbay.com/search-mortgage-bankers/.
I am trying to capture data from the html after a click event happens. so when someone click on the view me button i am able to capture the name of the mortgage banker and the ID. I am implementing Adobe Analytics and this is one of the events the Marketing teams wants to capture.
Hi @DARIUSD7, it does work for me… note that the return value within the event handler is going nowhere, though. If you want to prevent the default event if no corresponding .mbs-item is found, you can return false here, but I think this only works within jQuery event handlers. Like e.g.
$('.mb-view a').click(function() {
var mbsItem = $(this).parents('.mbs-item');
if (mbsItem.length) {
// Do something here
console.log(mbsItem.attr('data-mb-name'),
mbsItem.attr('data-mb-id'));
} else {
// Don't follow the link
return false;
}
});
Edit: Just noticed that you didn’t query for that .mbs-item in the context of the specific event target – so it worked for me in a fiddle with only one such item given, but will indeed lead to undesired results when there are multiple items present.
Thanks m3g4p0p for your response. So what I am doing is testing your script on https://jsbin.com/jatedavoxi/edit?html,js,console,output to see the output. I basically copied the html for the mortgage bankers… entered your script in the javascript space and then clicked on view me to see if anything shows in the console per your code. and I am getting no results. Please be patient with me as I am a beginner at this stuff. I am trying to find a way to test what you wrote so I can figure out how to apply it, but since I am not getting any results I am not sure what to do, and I am not sure how you are getting results or what environment you are using to run and test. Please advise.
No worries! :-) Did you remember to include jQuery in the bin? It should work, have a look here.
As for the console, there’s always one in your dev tools; in most browsers you can open these with ctrl/cmd + shift i, or by right-clicking somewhere on the page and selecting “Inspect”. It’s certainly the most important tool right after your text editor! :-)
so here is my problem. now, it appears that it only works with the console.log. but how do i apply that and capture the value with out passing it to console.log… when i tried the following, it doesn’t work
$('.mb-view a').click(function() {
var mbsItem = $(this).parents('.mbs-item');
if (mbsItem.length) {
// Do something here
var s.evar51 = (mbsItem.attr('data-mb-name'));
return s.evar51;
} else {
// Don't follow the link
return false;
}
});
The listener itself won’t do anything with that return value (unless it’s false), so it will go unheard. If you want to make that value available to the global scope, s would have to be declared there, like
var s = {};
$('.mb-view a').click(function() {
var mbsItem = $(this).parents('.mbs-item');
s.evar51 = mbsItem.attr('data-mb-name');
});
Note though that the value will be assigned to the variable only when the event got fired, so this
var s = {};
$('.mb-view a').click(function() {
var mbsItem = $(this).parents('.mbs-item');
s.evar51 = mbsItem.attr('data-mb-name');
});
console.log(s.evar51);
will always log “undefined”. So you’ll have to process that value right within the event handler itself, or call another function from there and pass the value (in which case you don’t need the global variable). Or process it later within another event handler, like (for demonstration purposes):
var s = {};
$('.mb-view a').click(function() {
var mbsItem = $(this).parents('.mbs-item');
s.evar51 = mbsItem.attr('data-mb-name');
});
$('.mb-apply a').click(function() {
// Logs "Amiee Carr" if VIEW ME was clicked before,
// otherwise "undefined"
console.log(s.evar51);
});