Key press dont work on dynamicly created element [duplicate] - javascript

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
i am trying to add a new span of tag inside tags div.
my problem is that the code under span[id="newtag"] doesnt
work. how can i make this code work?
$(document).ready(function () {
$('#tags').on("click", function () {
$(this).append('<span id="newtag" contenteditable="true"></span>');
$(this).children(":last").focus();
});
$('span[id="newtag"]').keypress(function (k) {
if (k.which == 13 || k.which == 32) {
$(this).append('gfskjsokdfla');
}
});
});

Use event delegation for created dymanically dom elements.
$('#tags').on('keypress', 'span[id="newtag"]', function(k){
if (k.which == 13 || k.which == 32) {
$(this).append('gfskjsokdfla');
}
});

Related

Check if the Checkbox with the Value X gets unchecked? [duplicate]

This question already has answers here:
jQuery checkbox change and click event
(20 answers)
Closed 5 years ago.
if(!$('input:value').is(:checked)){
//do something
}
How do i do this, i canĀ“t find an example?
I want to know if a checkbox with a specific value has been checked.
loop through checkboxex
and then check as below
var c=$(".commonclassname");
for(var i=0;i<c.length;i++)
{
if(c[i].value=="your value")
{
//matched...
}
}
Here's how to detect if a checkbox with a particular value gets unchecked
$("input[type=checkbox]").click(function() {
if ($(this).val() == "test2" && !$(this).is(":checked")) {
alert("Unchecked Test2");
}
});
Fiddle: https://jsfiddle.net/vwm28b7u/1/

jQuery change function not logging to console [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
The change function is not firing to the console after I change the value in the dropdown. When I apply the code in the console and run it, changed!! logs without any problem. What could be the cause of this?
jQuery( document ).ready(function() {
/* Watch for changes in UITVERKOCHT for 50m and 100m pages and change the text */
if(window.location.href.indexOf("prikkabel-50-meter") > -1 || window.location.href.indexOf("prikkabel-100-meter") > -1){
console.log('window location true');
jQuery('#aantal-fittingen').change(function(){
console.log('changed!!');
if(jQuery('.woocommerce-variation-availability > p').text() === "Uitverkocht"){
jQuery('.woocommerce-variation-availability > p').text('Beschikbaar');
}
});
}
});
This is the page when I would like this code to work: https://pkled.wpstagecoach.com/product/prikkabel-50-meter/
This solved my problem:
if(window.location.href.indexOf("prikkabel-50-meter") > -1 || window.location.href.indexOf("prikkabel-100-meter") > -1){
jQuery(document).on('change', '#aantal-fittingen', function() {
if(jQuery('.woocommerce-variation-availability > p').text() === "Uitverkocht"){
jQuery('.woocommerce-variation-availability > p').text('Preferred text');
}
});
}
Thanks to #epascarello

Keypress check not working [duplicate]

This question already has an answer here:
Click event not working for dynamically added Li->span->id
(1 answer)
Closed 6 years ago.
If i add the search bar right away, it works, the console returns the value of the search field every time i press enter, but if i add the search bar after the image was clicked it doesn't work.
http://codepen.io/Nadaga/pen/QEVaGA
$('#glass-image').on('click', function() {
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>');
})
$('#search-field').keypress(function (e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
Since, the search-field is dynamically created, It has to be added like this (on the $document),
$(document).on('keypress', '#search-field' ,function(e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
$('#glass-image').on('click', function() {
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>');
$('#search-field').keypress(function(e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
})
Click event only works if the element already exist in html code. So the click event doesn't fire.It won't consider the new element which is created dynamically after the page loaded. Dynamic elements are created with the help of javascript or jquery(not in html).
source: https://stackoverflow.com/a/29674985/1848140

Onclick destroys other function [duplicate]

This question already has answers here:
What's the effect of adding 'return false' to a click event listener?
(16 answers)
Closed 8 years ago.
When I try to add this line of code :
onclick="document.getElementById('part3').style.display='';return false;"
Into a link it disables the other function for some reason.. This is the code in which i would like to add the above code:
a href="javascript:DecreaseQuantity('PROD_VK_1.4')">
Works fine until i add the code, then only the onclick function works not the javascript part.
How can I fix this?
Try this,
<a href="javascript:DecreaseQuantity('PROD_VK_1.4')" onclick="doFunction()" />
function doFunction() {
document.getElementById('part3').style.display='';
return false;
}
or:
function doFunction() {
if ($("#part3").css("display", "")) {
return false;
} else {
return true;
}
}

How to distinguish program click from physic [duplicate]

This question already has answers here:
Click source in JavaScript and jQuery, human or automated?
(4 answers)
Closed 8 years ago.
I have an image and code
$(thisSrc).click();
How I can to distinguish physic mouse click by user
$(thisSrc).on("click", function () {
});
from program by javascript?
$(thisSrc).click();
There is isTrigger key in event when it's triggered.
$(el).click(function(e) {
if (e.isTrigger) {
// triggered
} else {
// clicked by hand
};
});
One way would be like this:
var realClick = true;
realClick=false;$(thisSrc).click();
$(thisSrc).on("click", function () {
// stuff
realClick=true;
});

Categories