Jquery not functioning on table created by javascript - javascript

I have table which i created entirely by javascript and my Jquery code dont want to work with it :/ If i use it on Table which is created manualy (in html) i works just fine. See fiddle below.
FYI this jquery code should just alow user to use arrow keys for navigation between inputs (table cells)
Here is that jsFiddle
I load my scripts in head:
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
Table is created here (in body):
<div id="myTable">
</div>
<script type="text/javascript">
createTable();
addPerson(1);
</script>
This is my jQuery:
$(document).ready(function() {
$('input').keydown(function(e) {
if (e.keyCode == 40 || e.keyCode == 13) {
var thisClass = $(this).parent().attr('class');
$(this).parent().parent().next('tr').children('.' + thisClass).children().focus();
}
});
$('input').keydown(function(e) {
if (e.keyCode == 39) {
$(this).parent().next('td').children('input').focus();
}
});
$('input').keydown(function(e) {
if (e.keyCode == 38) {
var thisClass = $(this).parent().attr('class');
$(this).parent().parent().prev('tr').children('.' + thisClass).children().focus();
}
});
$('input').keydown(function(e) {
if (e.keyCode == 37) {
$(this).parent().prev('td').children('input').focus();
}
});
});

You connect event listeners only to existing elements. You should connect it to document to deal with dynamically created elements:
$(document).on('keydown', 'input', function(e) {
// keycode first
if (e.keyCode==40 || e.keyCode==13) {
}
// keycode second etc.
if (e.keyCode==39) {
}
if (e.keyCode==38) {
}
if (e.keyCode==37) {
}
});
UPD actually it is a bad idea to connect listener to a document if it is very large. You can attach listener to an element after creating it.

You probably tried to bind the keydown event before the table was created. Try using the on method instead.
You also need to attach the event to an existing parent element that existed before the creation of the table, like in the body or another parent element.
$('body').on('keydown', "input", function(e) {
if (e.keyCode==40 || e.keyCode==13) {
var thisClass = $(this).parent().attr('class');
$(this).parent().parent().next('tr').children('.'+thisClass).children().focus();
}
});
Take this as an example. I would recommend you to use another wrapping element and bind via it's class or id, instead of element name.

Related

Jquery linkging to html issue

how to link this Jquery to my html page?
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
can someone help me? Iv been trying but its not working!
I need to know exactly how?
should I include something between my "head" tags? or body or where exactly?
the code is from code pen:
https://codepen.io/anon/pen/YVZQQX?editors=0010
code:
$(".form").find("input, textarea").on("keyup blur focus", function(e) {
var $this = $(this), label = $this.prev("label");
if (e.type === "keyup") {
if ($this.val() === "") {
label.removeClass("active highlight");
} else {
label.addClass("active highlight");
}
} else if (e.type === "blur") {
if ($this.val() === "") {
label.removeClass("active highlight");
} else {
label.removeClass("highlight");
}
} else if (e.type === "focus") {
if ($this.val() === "") {
label.removeClass("highlight");
} else if ($this.val() !== "") {
label.addClass("highlight");
}
}
});
$(".tab a").on("click", function(e) {
e.preventDefault();
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
target = $(this).attr("href");
$(".tab-content > div").not(target).hide();
$(target).fadeIn(600);
});
It works perfectly in code pen, but when I copy it, it doesn't work!
Thank you
You need to include jQuery via a <script> tag.
JS should be loaded at the end of the page (performance reasons) unless you have a solid reason for including it in the <head>, i.e. feature detection, JS placement is not under your control (CMS etc.).
Since you're unsure of how to include JS into a web page I feel it's worth noting that you will need to include jQuery before your code.
Include JS right before </body>:
<!-- the rest of your page -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="path/to/script.js"></script>
</body>
</html>
Or you can include it in the <head> if you have to (usually later rather than earlier in the <head>):
<head>
<!-- meta tags, title tag, link tags for CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
If you load your code in the <head> you'll probably want to wrap it $( document ).ready(); so that the code doesn't get executed right away. Why? If you try to interact with a DOM (HTML) right away that hasn't been parsed yet you'll run into problems. $( document ).ready(); will defer the execution of the code until the DOM is ready.
$( document ).ready( function () {
// your code here
} );
$( document ).ready() is not required if JS is included at the very bottom of the page.
put this in between the head tags of your html page
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

Right click stop propagation

How do I stop the propagation for right click events in javascript, so parent elements do not detect them at all?
When I click the link in the following html, left clicks are not detected, but right clicks are detected by the document element as 'click' events instead of 'contextmenu' events. I've tried to attach event listeners to mousedown, contextmenu, but to no success.
[EDIT] Changing the code to contextmenu works on chrome but not firefox (v23.0.1), this is probably a firefox bug.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/javascript;version=1.8">
function log(s){
document.getElementById('log').innerHTML+=s+'<br/>';
}
window.onload=function(){
document.addEventListener('click',function(e){
log('click detected');
},false);
let link=document.querySelector('a#link');
//click only cares about left clicks
link.addEventListener('click',function(e){
e.stopPropagation();
return false;
},false);
};
</script>
</head>
<body>
<a id="link" href="javascript:void(0);">Link</a>
<div id="log"></div>
</body>
</html>
The 'right click' event is called the 'contextmenu' event.
http://www.quirksmode.org/dom/events/contextmenu.html
Example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function log(s){
document.getElementById('log').innerHTML+=s+'<br/>';
}
window.onload=function(){
document.addEventListener('click',function(e){
log('click detected');
},false);
document.addEventListener('contextmenu', function(e){
log('right-click detected');
}, false);
var link=document.querySelector('a#link');
link.addEventListener('click',function(e){
e.stopPropagation();
return false;
},false);
link.addEventListener('contextmenu',function(e){
e.stopPropagation();
return false;
},false);
};
</script>
</head>
<body>
<a id="link" href="javascript:void(0);">Link</a>
<div id="log"></div>
</body>
</html>
Chrome won't execute script tags, including a version , for some reason, so i replaced let with var...
Stopping the propagation of a contextmenu event triggered from a#Link to document works fine for me, in Chrome and Firefeox, here is the example i used.
Edit
the contextmenu events are detected by the document element as click events instead.
In this case you can use a mousedown event, and add the condition event.which === 3
I updated the example, and added an example on JSBin
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<a id="link" href="javascript:void(0);">Link</a>
<div id="log"></div>
<script type="application/javascript">
window.onload = function () {
var link = document.querySelector('a#link');
function log(s) {
document.getElementById('log').innerHTML += s + '<br/>';
}
document.addEventListener('mousedown', function (e) {
if (e.which === 3) {
var src = e.target || e.srcElement;
log((src.nodeName === 'A' ? 'bubbled' : 'direct') + ' contextmenu on document detected');
}
}, false);
link.addEventListener("mousedown", propagate);
function propagate(e) {
if (e.which === 3) {
log("contextmenu on link, propagating");
link.removeEventListener("mousedown", propagate);
link.addEventListener("mousedown", nopropagate);
}
}
function nopropagate(e) {
if (e.which === 3) {
log("contextmenu on link, nopropagating");
e.stopPropagation();
}
}
}
</script>
</body>
</html>
Now rightclicking in the following order gives us these outputs.
rightclick on document
rightclick on link (propagates on first click)
rightclick on link (doesn't propagate)
Screenshots are from Firefox 20.0

Cloned content editable div not retaining keydown event

I'm very new to Jquery and looking to solve the reason a keydown event on a content editable div isn't cloning. I thought I had solved things when I discovered clone(true), but no my code still isn't working. The code below is a simplified version of what I'm trying to achieve.
Basically I'm attaching a keydown event to a content editable div then cloning it. However the cloned div isn't working like the original div.
I've been searching for a solution for a good while now and was hope someone could give me an answer so I can move on - many thanks.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>untitled</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var mymax1 = 10;
$('#List_1').keydown(function(e){ check_charcount(mymax1, e); });
function check_charcount(mymax1, e)
{
<!--prevent line breaks, that is the enter key from working-->
if(e.keyCode==13){
e.preventDefault();
}
if(e.which != 8 && $('#List_1').text().length > mymax1{
$("#List_1").css("background-color","yellow");
e.preventDefault();
}
}
<!---->
var $cloned = $('#hope').clone(true);
$('#placeHere').append($cloned.html());
});
</script>
</head>
<body>
<div id="hope">
<div id="List_1" contentEditable="true">TEXT</div>
</div>
</br>
<div id="placeHere"></div>
</body>
</html>
Some things were not correct in your code as pointed Ian.
In your keydown function you are using $('list_1'), you should use reference to element.
BTW, clone keep id attr which mean that your cloned element get same id as original, which is not valid. See working code:
$(document).ready(function () {
var mymax1 = 10;
$('#List_1').keydown(function (e) {
check_charcount(mymax1, e);
});
function check_charcount(mymax, e) {
if (e.keyCode == 13) {
e.preventDefault();
}
if (e.which != 8 && $(e.target).text().length > mymax) {
$(e.target).css("background-color", "yellow");
e.preventDefault();
}
}
var $cloned = $('#hope').clone(true);
$('#placeHere').append($cloned.contents().removeAttr('id'));
});
SEE DEMO

Identify which element id or class was clicked using jQuery?

Suppose I have
<body>
<div id="stuff">
<div id="cat">a</div>
<div id="dog">b</div>
<div id="elephant">c</div>
<div id="rabbit">d</div>
<div id="frog">e</div>
</div>
</body>​
So far the closet I could get was with JS,
document.getElement('body').onclick = function(e){
alert(e.target.innerHTML);
}​
Which prints out the contents of the div when I want the literal div id like 'cat' or 'dog' not 'a' or 'b'. Also I am trying to accomplish this using jQuery, am I heading in the right direction?
You need to include jQuery js file in order to use jQuery methods.
With jQuery
$('body').click(function(e){
alert(e.target.innerHTML);
alert(e.target.id)
alert($(e.target).attr('id'));
}​);
With Javascript
document.getElement('body').onclick = function(e){
alert(e.target.innerHTML);
alert(e.target.id)
}​
Sample html page using JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
document.getElement('body').onclick = function(e){
alert(e.target.innerHTML);
alert(e.target.id)
}​
</script>
</body>
</html>
http://jsbin.com/ohotuv/1/edit
document.getElementById('stuff').onclick = function( e ){
alert( e.target.id );
};
jQ way:
$('#stuff').click(function( e ){
alert( e.target.id );
});
If it has not an ID, but has a CLASS (and you want it!) you can do:
http://jsbin.com/ohotuv/3/edit - (where "elephant" is a class)
$('#stuff').click(function( e ){
var name = e.target.id || e.target.className;
alert(name);
});
If you are using pure javascript you may need to make it cross browser compatible.
window.onload=function(){
document.getElementsByTagName('body')[0].onclick = function(e){
e = e ? e : window.event;
var source = e.target || e.srcElement;
alert(source.id);
}
}
I'd recommend reading up on jQuery.on().
In your example I'd recommend:
$("body").on("click", function(event){
alert($(this).id);
});
Although it's highly recommended to reduce the scope what what elements you're looking for the click event. For example:
$("#stuff").on("click", "div", function(event){
alert($(this).id);
});
Which would only handle ANY div element inside the html tag with the id of stuff. Reducing the context of handling events can help with encapsulation and debugging problems.

Click events and MouseOut events not working in chrome

Not able to get into the functions for onclick & onmouseout/over events in Chrome and Firefox. Any reasons for not working in Chrome and FF is there a way around for this. These work fine in IE9 and Opera..
Code in html page is shown below:
<script language="JavaScript" for="SmartGridCell" event="onclick()">
sg_CellClick(event.srcElement);
</script>
<script language="JavaScript" for="SmartGridCell" event="onmouseover()">
sg_MouseOverCell(event.srcElement);
</script>
more click events...
<script language="javascript" for="optSet" event="onclick()">
mc_SelectAnElement(this, document.getElementsByName('optSet'));
</script>
<script language="javascript" for="answerChoice" event="onclick()">
mc_SelectAnElement(this, document.getElementsByName('answerChoice'));
</script>
This is what I have done so far, but I cannot get the fire the event in Chrome...
<script language="JavaScript">
var s1=document.getElementsByName('optSet');
for (var i=0;i<s1.length;i++)
{
s1[i].addEventListener("click",mc_SelectAnElement(this, document.getElementsByName('answerChoice')),false);
}
</script>
Tried this as well, this snippet gets me to the function but the values selected never persists...
if (document.addEventListener)
{
document.addEventListener("click",function (e){
var srcElement= e.target;
var tagName= srcElement.tagName;
if(tagName="optSet")
{
mc_SelectAnElement(srcElement, document.getElementsByName('optSet'));
}
//mc_SelectAnElement(this, document.getElementsByName('optSet'));
},true);
}
Thanks-
In modern JavaScript it would be something like:
if (document.addEventListener) {
document.addEventListener('click', function (e) {
var el = e.target;
var id = el.id;
// the "for" attribute refers to an ID
if (id == 'SmartGridCell' || id == 'SmartGridHeaderCell') {
sg_CellClick(el);
}
}, true);
/* repeat the same for "mouseover" and "mouseout" */
}
You can leave the old script too, they won't clash.
Why this works in IE – because they invented their own ugly KnockoutJS 20 years ago. And it's non-standard of course (DOM 2 says Reserved for future use for the for and event attributes).

Categories