This question already has answers here:
How to get id of an element in jQuery?
(3 answers)
Closed 9 months ago.
I have an event listener for some checkboxes:
$('.table-sticky-container').on('click', 'label', function() {
console.log(this);
})
This logs: < label id="checkbox,0">...</label
How do I access this id? I would like it to console "checkbox,0". I'm not sure about the syntax. I tried this.id, this('label[id]]') and bunch of other stuff. Anybody know?
Thank you.
By accessing the id property of this:
$('#foo').on('click', function() {
console.log(this.id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<lable id="foo">Test</label>
Related
This question already has answers here:
jQuery Event : Detect changes to the html/text of a div
(13 answers)
Trigger for span text/html on changed
(6 answers)
Closed last year.
I really dont know how get the div tag in between value Which in this case is
F064
I have this Hmtl code..
<div class="product--price price--unit">
<span class="price--label label--purchase-unit">articlenumber:</span>
F064
</div>
I want to say if the F064 changes then alert what its changed to.
I want something like this in either JS or JQuery
var divTagVal = $("div.product--price");
$(divTagVal).on('change', function () {
alert(divTagVal);
});
So if F064 changes to F065 the it should alert "F065"
but this doesnt work, what am i doing wrong ?
This question already has answers here:
How can I get the data-id attribute?
(17 answers)
Closed 3 years ago.
Im trying to write a little filter script for a ajax-table and im trying to open a overlay when someone clicks on the element:
<div class="at-filter" data-filter-val="{some_value}" data-filter-type="{some_type}">
...
</div>
How do i access the data-filter-type and value via javascript/jquery? Cant find anything at all via google.
Something like this is what im looking for:
this.table.find( '.at-filter' ).each(
function(index, element) {
var type=$(element).data-filter-type();
var val=$(element).data-filter-val();
self.data.filter[type] = {};
$(element).bind('click', {self:self, val:val, type:type}, type.openContextMenu);
}
)
edit: Mistakes were made!
To get attrbiute value use jquery attr() or in plain JavaScript getAttribute
But
To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
Or
In plain JavaScript setAttribute
console.log($('.me').attr('data-attribute'));
console.log($('.me').attr('data-second-attr'));
$('.me').each(function() {
console.log(this.getAttribute('data-attribute'));
console.log(this.getAttribute('data-second-attr'));
this.setAttribute('data-second-attr', 'foo-bar');
console.log('after change', this.getAttribute('data-second-attr'));
})
$('.me').prop('data-attribute', 'baz')
console.log('after change', $('.me').prop('data-attribute'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="me" data-attribute="foo" data-second-attr="bar">yo</div>
You use attr:
var type = $(element).attr("data-filter-type");
You could also use data:
var type = $(element).data("filter-type"); // Read the note below, though
... but it isn't necessary or really appropriate if all you want to do is access the values of those attributes. Contrary to popular belief, data is not an accessor for data-* attributes. (It's both more and less than that.)
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I'm adding some code(!with js code included!) dynamically.
<div class="r"></div>
<script>
//Here is code that dinamiccaly add another div into div.r
//Example:
//<div class="w"><img src="a.png"><div class="i">Some Text</div></div>
$('.r').on('click', $('.w'), function (e) {
console.log($(this).children($('.i')).text());
});
</script>
Problem that this click event works anythere I click in div.w and returns text of ALL div.w combined in one string without spaces (sometext1sometext2).
Sorry if I wrote something wrong. I'm bad in english.
Event delegation is wrong. You are using a jQuery collection
$('.r').on('click', $('.w'), function (e) {
^^^^^^^
where it should be just a selector
$('.r').on('click', '.w', function (e) {
^^^^
The selector has to be of type string. Look at the following:
$('.r').on('click', '.w', function (e) {
from documentation of on
This question already has answers here:
jQuery, get html of a whole element [duplicate]
(4 answers)
Closed 8 years ago.
I'm trying to convert the pure html of a Node or HTMLElement to string but i can't seem to get the right result as shown in the console. That means just the html element, not it's child elements...
CODE
function eventData(e){
return {
'sender': e.srcElement || e.target,
'event': e || window.event,
};
};
$(document).ready(function(e){
var $elm = $("<input class='test' data-type='text only'/>").attr({'type':'button','value':'Test'});
$elm.appendTo('#target');
$elm.click(function(e) { alert(eventData(e).sender.value); });
$('#asHTML').text($elm[0].toString());
//Console is the best way to display a node object;
//Open your console to see the result;
console.log($elm[0]);
});
I'm just wondering if any one of you has successfully done this!
DEMO: http://jsfiddle.net/0xfwLfwj/1/
EDIT
Updated fiddle with better explanation: http://jsfiddle.net/ttoom9hc/10/
If this is what you want to display -
<input class="test" data-type="text only" type="button" value="Test">
Then this is the piece of code for it -
$('#asHTML').text($elm[0].outerHTML);
Here is a fiddle
have you tried
$elm.html()
That should give you the HTML of that element as a string.
http://api.jquery.com/html/
This question already has answers here:
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 8 years ago.
What is the best way to bind an event on multiple element .
I wrote this code to do that is there is any good way to do that.
$('#GiftPurchase_recipient_first_name,#GiftPurchase_recipient_last_name').bind('blur', function() {
gift_to = $('#GiftPurchase_recipient_first_name').val()+" "+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
I have two input box with first name and last name, i wont to display there first anme and last name into a another element
Give the elements a class and add the event to the class.
$('.theclassnamethatalltheelementsshare').bind('blur', function() {
gift_to = $('#GiftPurchase_recipient_first_name').val()+""+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
maybe this works
$(document).ready(function(){
$('#GiftPurchase_recipient_first_name,#GiftPurchase_recipient_last_name').bind('blur',function(){
var gift_to = $('#GiftPurchase_recipient_first_name').val()+" "+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
});
Fiddle