If I have the following piece of code:
<button id="btnOne" data-football="Mitre">Press Me</button>
How would I get the name of the data tag, so in this case it would be 'data-football'. I know how I would get the value but would like to know how I can get the name of the data-tag - in this case data-football when the button is pressed.
i.e,
$(document).on("click", "button", function(){
// Get the name of the attribute (data-football - not the value);
});
Thanks.
You can use attributes property for getting the all attributes of a HTML tag
<div id="_id" data-football='test'></div>
<script>
const attrs = document.getElementById('_id').attributes
const keyName = attrs[1].nodeName // will be data-football
</script>
Try one of the following.
$(document).on("click", "button", function(){
$(this).data('data-football')
});
Or
$(document).on("click", "#btnOne", function(){
$(this).data('data-football')
});
Read More about jQuery data
Related
I try to add an EventListener to a button. Here is my code:
<button data-id="g/incider/perry">Kaufen</button>
<script type="text/javascript">
var button = document.getElementById('g/incider/perry');
button.addEventListener(
'click',
function() {
alert("test");
},
false
);
</script>
But the alert is not shown when the button is clicked.
I believe that you are new to the Javascript so will help you out here.
As you see your element <button data-id="g/incider/perry">Kaufen</button> has data-id attribute mentioned but you want to select the element by id as per your code document.getElementById()
Solution: document.getElementById() as the property named it searches for the id attribute in the element so you need to provide id to the element
<button id="uniqueID">Kaufen</button>
and then selecting it with,
const button = document.getElementById('uniqueID');
To Learn more about selectors in JavaScript you can check This Link
Try id instead of data-id.
<button id="g/incider/perry">Kaufen</button>
<script type="text/javascript">
var button = document.getElementById('g/incider/perry');
button.addEventListener(
'click',
function() {
alert("test");
},
false
);
</script>
If you want to use data-id for some reason you have to use the getAttribute() function to get the value of an attribute otherwise just stick with id.
const button = document.getElementById('g/incider/perry');
button.addEventListener('click', () =>
alert("test");
}, false);
<button id="g/incider/perry">Kaufen</button>
I've some buttons on my page. The mockup looks like this
<button type="button" class="js-category-delete" data-id="1">
Delete
</button>
The goal is to get the value of the data-id attribute. Currently I'm using this javascript.
jQuery('.js-category-delete').on('click', (event) => {
let id = jQuery(this).attr('data-id');
});
My problem is that when I log the value to my browser console console.log(id); I the value of the id variable is undefined.
What is wrong with my code?
Using arrow function expression implies the value of this is not the one you intend.
In this case you need to use event.target:
jQuery('.js-category-delete').on('click', (event) => {
let id = jQuery(event.target).attr('data-id');
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="js-category-delete" data-id="1">
Delete
</button>
To suggest you an alternative way:
$('.js-category-delete').on('click', function (event) {
const clickedItem = jQuery(this); // and also jQuery(event.target)
const id = clickedItem.data('id');
console.log(id);
});
The function keyword makes this what you've expected at first.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
Pen: https://codepen.io/shifu462/pen/WVaGLB
Also, as a shortcut for
jQuery(event.target).attr('data-id');
I've used here another jQuery method to get the value of a data attribute.
jQuery(event.target).data('id');
Docs: https://api.jquery.com/data/
I use webpack and the data-cash. I have a link with data attribute that I want to access.
HTML:
<a class="myBtn" data-article="some value">
<div>some text here</div>
</div>
Javascript:
$('.myBtn').on('click', (e) => {
const articleData = $(e.currentTarget);
console.log(articleData);
modal.style.display = 'block';
e.preventDefault();
});
The code above returns
Cash [a.myBtn]
How can I access the value of data attribute (article)?
Try with $(this).data('article') inside your event listener. jQuery has a .data() function for those purposes.
EDIT: Attached a Fiddle.
For cash-dom jQuery you should use .attr() instead of .data(). According to their docs you can get your data-article attribute by doing $(element).attr('data-article').
My solution looks like this:
$('.myBtn').on('click', (e) => {
const articleData = $(e.currentTarget);
articleData.attr('data-article')
console.log(articleData.attr('data-article'));
e.preventDefault();
});
I have a script that produces a number of buttons with a class and I want it to alert the data attribute on click but it's not working.
Here is the output of HTML
<button class="request box-button" data-value="18492500814">Request</button>
jQuery code
$(document).ready(function(){
$('.request').each(function () {
var photoID = $(this);
photoID.click(function () {
alert($(this).data('value'));
});
});
});
Since your elements don't exist when the page loads, the event won't be bound to them. Fix that by using event delegation:
$(document).ready(function(){
$(document).on('click','.request', function () {
alert($(this).data('value'));
});
});
JS Fiddle demo with dynamically generated elements
Note: Here, I used $(document).on() because I don't have your page's structure. But if you insert the buttons in a container that already exists in your HTML, use this instead: $('#myContainer').on(). It won't be noticeable, but it is best for performance.
Why not just have the listener on request, instead of inside of the loop. Also use the attr to get the data-value
$(document).ready(function(){
$('.request').click(function () {
alert($(this).attr('data-value'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="request box-button" data-value="18492500814">Request</button>
Try with attr method.
$(document).ready(function(){
$('.request').each(function () {
var photoID = $(this);
photoID.click(function () {
alert($(this).attr('data-value'));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button class="request box-button" data-value="18492500814">Request</button>
am learning jquery but am having a hard time figuring out how to set two attributes and give it a call back function at the same time.... i have te code to how to set multiple attributes and i have the code to how to give it a callback function but how do i pu them together in one...
here's the code for setting multiple atrributes:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3schools.com/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Change href and title</button>
<p>Mouse over the link to see that the href attribute has changed and a title attribute is set.</p>
And here's the code with a callback function
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
so how do i put them together? thanks in advanced to anyone who takes the time.
You can use chaining (more about jQuery chaining here: http://www.jquery-tutorial.net/introduction/method-chaining/), like this:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
}).attr('title','Tutorial');
});
});
</script>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
http://jsfiddle.net/FHD84/
Sure, you can do in this way (store the function in a variable and then assign it to attribute)
working example --> http://jsfiddle.net/HKEeB/2/
$(document).ready(function(){
$("button").click(function(){
var func= function(i,origValue){
return origValue + "/jquery";
};
$("#w3s").attr({
"href" : func,
"title" : "W3Schools jQuery Tutorial"
});
});
});
My understanding of what you were trying to do is:
When the button is clicked, the <a> tag will change its href to the jQuery page.
When that link is clicked, the original values will be reset
If this is correct, here is how I would do it:
//-- $(function () {...}) is shorthand notation for $(document).ready(function () {...});
$(function () {
//-- I stored the lookup for #w3s to prevent duplicate calls to $()
var $link = $('#w3s');
//-- store the original attribute values using jQuery data()
$link.data({
'href': $link.attr('href'),
'title': $link.attr('title')
});
//-- This is essentially the same as your $('button').click(), but using delegation
$(document).on('click', 'button', function () {
//-- update the attributes
$link.attr({
'href': 'http://www.w3schools.com/jquery',
'title': 'W3Schools jQuery Tutorial'
})
//-- on click, reset the original values
$link.on('click', function (event) {
//-- event.preventDefault() will stop the link from performing its default functionality
//-- in this case, that would be following the href
event.preventDefault();
//-- pull the original values from jQuery data()
$link.attr({
'href': $link.data('href'),
'title': $link.data('title')
});
});
});
});
JSFiddle link: http://jsfiddle.net/9x56L/
Note: I disabled the link in this example. I am not sure what the context of this is, but redirecting away from the page is probably not the intended result.