I use JQuery to register events for different tags. Here is the code so far:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.7.js"></script>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<div><p>another one</p></div>
<p><strong>big one</strong></p>
<div contentEditable="true"><p>hello <b>there</b></p></div>
<script>
$("p").click(function () {
alert('p tag');
});
$("div").click(function () {
alert('div tag');
});
$("b").click(function () {
alert('strong tag');
});
</script>
</body>
</html>
I want to develop a simple text editor and want to capture click events so that I can update the state of my buttons (bold, italics, ...). I want the click events to work inside an editable div as well but they only fire once when the div tag is selected and afterwards when the editing begins, clicking anywhere inside that div doesn't fire, even though I have p and b tags inside the div. Is is possible to achieve this using an editable div? Basically I want to be able to know if the cursor is inside a b tag or an i tag so that I can update the state of my buttons.
you can use .one
$("editableDIV").one("click",function(){...});
Related
I am trying to get jQuery to copy an element's title attribute when it is clicked, but I think I'm having a problem with event bubbling.
I can do this easily enough with straight JS, but I'm trying to understand how to do this with jQuery.
Here is my code:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<p class="copy" title="actual text to be copied">Hello world.</p>
<script>
$('document').ready(function(){
$(".copy").on({
click: function(e) {
document.execCommand("copy");
},
copy: function(event) {
if (event.originalEvent.clipboardData) {
// allegedly copies the text to the clipboard
event.originalEvent.clipboardData.setData("text/plain", $(this)[0].title);
// show us what was copied.
alert(event.originalEvent.clipboardData.getData("text"));
}
}
});
});
</script>
</body>
</html>
event.clipboardData doesn't exist, but event.originalEvent.clipboardData, so I'm working with that.
But I think the problem is that event.originalEvent.clipboardData is not actually the clipboard. But jQuery doesn't seem to expose that part of the API to it's own event.
Do I make jQuery apply it to the actual event rather than to originalEvent? If yes, then how so?
Here's a jsbin: https://jsbin.com/borumexuga/edit?html,js,output
Insert event.preventDefault(); inside the if.
https://jsbin.com/guwowomece/1/edit?html,js,output
Below is my code, why isn't it working when I click on Appended text ?
1: click on This is a paragraph.
2: click on Appended text
3: Must show Appended item with color red.
$(document).ready(function(){
$(".ali").click(function(){
$(this).parent().append("<b class='reza'>Appended text</b>");
});
$(".reza").click(function(){
$(this).append("<li style='color:red'>Appended item</li>");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p><span class="ali"> This is a paragraph. </span> </p>
</body>
</html>
Since the element with class "reza" is not created yet, you need to define click event on future element with "reze" class. Check the below working code.
$(document).ready(function(){
$(".ali").click(function(){
$(this).parent().append("<b class='reza'>Appended text</b>");
});
$("body").on("click",".reza",function(){
$(this).append("<li style='color:red'>Appended item</li>");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p><span class="ali"> This is a paragraph. </span> </p>
</body>
</html>
Elements which are dynamically added to the document, can not be issued event listeners by normal means.
This is how you would normally add an event listener in jQuery.
$(element).on('click', function() {
// do something
});
The reason the example above won't work with a dynamically added element is due to the fact that the element doesn't exist when the script gets compiled.
So why does this work?
$(parent).on('click', 'element' function() {
// do something
});
This works because when the file gets compiled, the parent already exists. If you have a reference to the parent, then you can retrieve the children at anytime. Since the DOM is modular.
This question, in one way or another, has already been asked multiple times. Here's the preferred answer.
Event binding on dynamically created elements?
I am just playing with some basic Jquery and something strange is happening. I have two elements on the page.. an h1 heading, and a generic link. When I click the link I would like the text to change to "This text has now changed", and it does, but then either the button disappears and a new h1 is created with the same "this text has not changed" text, or the button itself turns into the h1. I'm not sure, but here's my code:
HTML:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<h1>This element should change.<h1>
Click Me<br>
</body>
</html>
JQUERY:
$(document).ready(function() {
$(".myLink").click(function() { // this is a convenience method that targets the same elements above just in a quicker fashion.
$("h1").html("This text has now changed.");
});
});
Picture Before the click:
Picture After:
Also, when I added the fade out method everything disappears once again, not just the targeted "h1" element.
Any advice is greatly appreciated as always. Thank you.
You have two opening <h1> tags (the second one is missing a /.)
<h1>This element should change.<h1>
^here
It looks like you have two start tags. EG:
<h1>Heading 1<h1>
Try changing the second tag to an end tag. EG:
<h1>Heading 1</h1>
^
Your h1 tag is not closed. You have 2 opening tags, and by default, your link is contained by the second opening tag so it's changing that html
I was trying to dynamically delete all (dynamically added) children from a simple web page, and I found that when I click my button to run the JavaScript code in the web page, the resulting deletion is different than if I run the same code in the browser console.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/main.js"></script>
</head>
<body onclick="addText()">
<h1 id="my_text">Click on the page.</h1>
<button onclick="deleteText()">Click here to remove text node</button>
</body>
</html>
JavaScript:
function addText() {
newText = document.createTextNode("This is dynamically added text");
newText.id = "dynamicText";
var textPart = document.getElementById("my_text");
textPart.appendChild(newText);
}
function deleteText() {
var parent = document.getElementById("my_text");
while (parent.childNodes[1]) {
parent.removeChild(parent.childNodes[1]);
}
}
In the browser, I click on the header to dynamically append text nodes to the header. Then I wish to click the button to delete all the dynamically added text. When I click the button in the browser, it deletes all of the dynamically added text except one newText element, resulting in this:
Click on the page.This is dynamically added text
But, when I execute the same code ( or even just call the function deleteText() ) in the browser console, it deletes all newText elements as desired, resulting in this:
Click on the page.
I'm wondering, why is the result different when the code is executed from the browser window versus in the browser console? I'm using Chrome Version 46.0.2490.86 m
Its because when you click your "remove" button you are still clicking in the body tag, so the onclick in the <body> tag is still being triggered adding a text node again.
This question already has answers here:
Jquery .show() not revealing a div with visibility of hidden
(6 answers)
Closed 7 years ago.
I am new to Jquery and go through some tutorials with w3.
I cant work out why my code wont work for the 'show' function the opposite to hide.
this is the code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).show();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<style>
p {
visibility: hidden;
}
</style>
</body>
</html>
it seems obvious but as the page loads all the <p> elements are not visible due to the styling but then i thought on click they should show? they don't. is the style too overpowering? if so how do you stop this? or i have made a simple error elsewhere.
thanks
You have two problems.
First, from the documentation:
The matched elements will be revealed immediately, with no animation.
This is roughly equivalent to calling .css( "display", "block"),
except that the display property is restored to whatever it was
initially. If an element has a display value of inline, then is hidden
and shown, it will once again be displayed inline.
The function you are calling will modify the display of the elements but not the visibility (which you have set to hidden).
To modify the visibility you would need to do so explicitly.
$(this).css('visibility', 'visible');
Second, even though an invisible element will take up space on the page, you can't click on something that isn't visible. It just won't fire the click event.
You can work around this by wrapping each paragraph in another element and putting the event listener on that.
$("div").click(function() {
$(this).find('p').css('visibility', 'visible');
});
p {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>If you click on me, I will disappear.</p>
</div>
<div>
<p>Click me away!</p>
</div>
<div>
<p>Click me too!</p>
</div>
$(this).show() won't change the visibility css property. Try: $(this).css("visibility", "visible");
How would you click on p element?
I think you should make a button element and on clicking that try to show the p element.
I think it would be helpful :)
Just use below Code that will work properly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("visibility", "visible");
});
});
</script>
</head>
<body>
<button>click on me.</button>
<p>Click me away!</p>
<p>Click me too!</p>
<style>
p {
visibility: hidden;
}
</style>
</body>
</html>