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?
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
I am new to javascript, and I have tried to debug as much as I can but I still cannot figure why I cannot get the alert "Event 1" to show up when I click on text:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script type="text/javascript" language="javascript">
$("#id").bind("click", function() {
alert("Event 1");
});
</script>
<body>
<div class="foo" id="id">Click</div>
</body>
</html>
The problem is that you need to ensure that you only bind to the element once the page has loaded, and the element is therefore accessible. This can be done by wrapping your existing jQuery in a $(document).ready(), as can be seen in the following working example.
Also, note that .bind() has been deprecated as of jQuery 3.0, and you should use .on() instead. Note that the elements that you target with .on must exist at the time that you make the call to them:
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()
If your target element is not visible in the DOM on page load, you can use event delegation to bind to an element that is visible on page load, and then delegate that functionality to the target.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#id").on("click", function() {
alert("Event 1");
});
});
</script>
<body>
<div class="foo" id="id">Click</div>
</body>
</html>
Hope this helps! :)
Open JavaScript:- this code isn't editable as it is locked by the Host! So also I can't add any selector inside it!
But I can add another code outside of it. Like:- <ex ex="ex">Open JavaScript</ex>
So, I want to create a <script src="/javascript.js"></script> by fetching the URL from Open JavaScript.
They also didn't allow PHP there, otherwise I could do it myself. There is only one way to do it via JavaScript.
And I don't want to add the script inside <head> tags! It should be in the footer (<div class="body-footer"> Here </div>). There are not only one JavaScript link in the page, there are so many JavaScript links. So also I can't use $("a[href$='.js']");. Its became more tougher for me.
So how can I do this using JavaScript or jQuery?
Here is my implementation, where <script> tag is added before <a> with value of href.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var hrefValue = $("div#test a").attr("href");
$("div#test a").before("<script src='"+hrefValue+"'><\/script>");
console.log($("#test").html());
});
});
</script>
</style>
</head>
<body>
<div id="test">
Open JavaScript
</div>
</br></br>
<button>CLICK it, to add href value of anchor tag to newly created sibling element</button>
</body>
</html>
In the below html, the front button doesn't respond while the back button changes the content of the tag.
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button onClick=document.getElementById('para').innerHTML="move front">
front
</button>
<button onClick=document.getElementById('para').innerHTML="back">
back
</button>
</body>
</html>
In the below, both the buttons change the content of the tag.
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button onClick=document.getElementById('para').innerHTML="movefront">
front
</button>
<button onClick=document.getElementById('para').innerHTML="back">
back
</button>
</body>
</html>
Why does a bank space make a button unresponsive?
That is just invalid HTML.
You have to put quotes around your whole onclick attribute value, otherwise it will end at the space.
onClick = document.getElementById('para').innerHTML="move // cut off here
front" // a second (meaningless) attribute for your button tag.
Please consider this syntax:
<button onclick="document.getElementById('para').innerHTML='move front'">front</button>
You are probably having issues if you are using this technique.
I am sorry but this is not how you attach a click event to elements in modern javascript, at least if you want to work with what's called "good practices".
The better method would be to attach a click event to a desired element using javascript.
I will give you a short code example.
First the HTML - I will use your original HTML (modified a bit):
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button id="frontBtn"> front </button>
<button id="backBtn"> back </button>
</body>
</html>
As you can see, I have removed your "onclick" events from the buttons, and assigned an id to each button.
Second, we will write some javascript to properly attach a click event to each one of the buttons, and of course execute the change of text as you originally was intending to do:
if you are familiar with jQuery then this will do:
$('#frontBtn').on('click',function(){
$('#para').html('move front');
});
$('#backBtn').on('click',function(){
$('#para').html('back');
});
This can also be done with vanilla (native) javascript:
document.getElementById("frontBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "move front";
});
document.getElementById("backBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "back";
});
Now we have a nicely structured event handler for each button, more code can be easily added.
As for where to insert your javascript ?
You can add the javascript to your html document by using script tags in your html document head like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// your code here..
</script>
</head>
<body>
....
....
Or even better - create a separate script file and load it at the bottom of your html page like this:
<!DOCTYPE html>
<html>
<head>
....
</head>
<body>
....
....
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>
This is the better way to attach events to elements, using javascript.
Imagine if you try to write 50-100 lines of code inline ? impossible! but with an event handler function you can do it easily.
Things will basically work better and your project will be much easier for you to maintain.
Hope it helps a bit!
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>