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
Related
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>
This question already has answers here:
jQuery match part of class with hasClass
(6 answers)
jQuery selector for id starts with specific text [duplicate]
(4 answers)
Closed 4 years ago.
Trying to get some help on some JavaScript we are trying to post accross multiple landing pages. We are sending values to hidden fields on a button click 'lp-pom-button-3'.
However, the ID changes depending on the page, but will always have the format 'lp-pom-button-' with the number potentially changing depending on the page. Is there a function similar to 'like' in SQL, or saying any button that starts with or contains 'lp-pom-button-" for this to be triggered on? Thanks for you help!
<script type="text/javascript">
document.getElementById('lp-pom-button-3').addEventListener(
'click', function(event) {
ga(function() {
var tracker = ga.getAll()[0];
var clientId = tracker.get('clientId');
document.getElementById('GACLIENTID').value = clientId;
var userId = tracker.get('userId');
document.getElementById('GAUSERID').value = userId;
});
});
You can use the css selector for attribute value contains.
[id*="lp-pom-button-"]
or attribute value starts with:
[id^="lp-pom-button-"]
In vanilla javascript you can access elements using css selector with querySelector or for getting a list of elements querySelectorAll.
Here is an example:
document.querySelector('[id^="lp-pom-button-"]');
And HERE is a list of all the browsers and browsers version that support this function.
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 binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
Here's what I am trying to do in (jquery,html):
The aim is to make it so that when I hit the switch (basic/advanced) a block of html is added to the existing html. Within this new block there will be another switch (less/more) which should added another block.
However I can't seem to (less/more) switch to work. In fact the function is not running at all.
The function that corresponds to the (basic/advanced) switch is:
var selectInvestment = "basic";
function expandInvestment(){
$("input[type=radio][name=expandInformation]").click(function(){
selectInvestment = $(this).val();
var huge = 'huge block of html code in here';
if(selectInvestment == "advanced"){
$('.investmentBlock').empty();
$('.investmentBlock').append(huge);
expandedExpenses();
} else if(selectInvestment == "basic"){
$('.investmentBlock').replaceWith("<...more html code...>");
}
});
}
And it's similar for the less/more switch.
Here is jsfiddle preview. http://jsfiddle.net/1g6uraht/1/
Because you're dynamically adding your new radio buttons, you'll need to use on
$("input[type=radio][name=expandedExpenses]").click(function(){
becomes
$("document").on('click', 'input[type=radio][name=expandedExpenses]', function(){
see jquery on
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