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
Related
I have created two short javascript files, each containing a $(document).ready function that has javascript to detect a button click from the html file that has included it. My main html file has the script tags pointing to each file in the header:
file1.js:
$(document).ready(function(){
$('.wrapper').on('click', '.click_1', function(){
alert('hello from the first file');
});
});
file2.js:
$(document).ready(function(){
$('.wrapper').on('click', '.click_2', function(){
alert('hello from the second file');
});
});
My goal, however, is to be able to dynamically remove one of the script tags (the javascript from the second file) from the header, and its functionality along with it. To do so, I created a script in my main html file to remove the target script tag via the src attribute. However, while an inspection of the page source reveals that the third script tag has indeed been removed, its functionality remains. For instance, even after clicking the .remove_2 button, I can still click the .click_2 button and receive the "hello from the second file" alert:
main.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
</head>
<body>
<div class="wrapper">
<button class='click_1'>File1</button>
<button class='click_2'>File2</button>
<button class='remove_2'>Remove File2</button>
</div>
</body>
<script>
$(document).ready(function(){
$('.wrapper').on('click', '.remove_2', function(){
$('script[src="file2.js"]').remove();
});
});
</script>
</html>
In short, I wish to be able to dynamically remove a script tag so that the javascript in the file that the tag points to no longer has any affect on the html page. However, I have not been able to accomplish this. Can anyone tell me what is wrong with my code? Also, is what I am trying to accomplish even possible? Thank you.
Removing an external script does not remove event handlers. They are attached to current document.
A solution can be:
remove the script
get all html page
replace html page with new content
$('.wrapper').on('click', '.remove_2', function(){
$('script[src="file2.js"]').remove();
var html = document.documentElement.innerHTML;
document.open('text/html');
document.write(html);
document.close();
});
In jQuery, replacing only the header after removing the script:
$('.wrapper').on('click', '.remove_2', function(){
var header = $('html head');
header.find('script[src="file2.js"]').remove();
$('html head').replaceWith(header);
});
Try unbinding the click event from the second button before removing it:
$('.click_2').unbind("click");
Although unbind is now deprecated. The newer form is 'off':
$('.click_2').off( "click", "**" );
http://api.jquery.com/off/
That said, you do seem to be using a rather peculiar approach to disable click functionality.
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?
Thiis is my code:
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
The alert is returning undefined instead of the color.
I tried on both Google Chrome and Firefox. I have extracted this from the w3c website and in their example, it works (I am even using the same jQuery version).
Either you're calling that code before jQuery loads, or you don't have a <p> tag in your document at the time the code is executed.
To test the first case, move the script to the window's onload event handler. This code will be run only after all scripts have been loaded.
window.onload = function(){
if(window.jQuery){
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
}
else{
alert("jQuery is not loaded");
}
}
If the alert jQuery is not loaded opens, you've identified the problem
To test the 2nd case, just be sure to include a <p> tag in your document before you try to change its CSS.
Works perfectly fine in this JSFiddle.
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
test
</p>
Verify that you have a <p> tag in your HTML (like in my fiddle), and check if you have JQuery included, like so:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
try this instead of your script.
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
});
});
for html try this
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
this is basic Javascript. you should need to define which html property you want to change using Javascript.
Make sure you've included JQuery source in the head tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
The code's working fine on JSFiddle.
checkout: here
never mind, I found the reason it isn't working. I created the p AFTER this instruction, so it was actually selecting nothing.
I encounter a very strange problem!
I wrote the following code:
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<textarea id="code">
<div id="hello">Hello world!</div>
<script type="text/javascript">
$(function(){
$("#hello").css({"border":"solid 3px red"});
alert($("#hello").size());
});
</script>
</textarea>
<iframe src="iframe.html"></iframe>
<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
$(this).contents().find("body").append($("#code").val());
});
});
</script>
The "iframe.html" file contains only a call to the jQuery library.
The result is that "Hello world!" is displayed in the iframe but without red border! It seems that $("#hello") does not work. In fact, if I do alert($("#hello").size()), I get "0".
Do you have any idea?
Thanks!
Edit: Add "alert".
$(this).contents().find("body").append($("#code").val());
Only gets the current value so probably it wont copy over any css value that is linked to it.
http://api.jquery.com/val/
What I suggest is testing it in 1 file first to see what it does so remove the iframe part for now and check the .size() on 1 file. that way you know how the .val and .size() behave on your #hello.
Try this as the script under the :
<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
alert($("#code").val());
var scriptx = $("#code").val();
$(this).contents().find("body")[0].innerHTML = scriptx;
});
});
</script>
});
</script>
I think the html format is wrong. You are putting the div inside the text area and inside any text area if you put some html elements then those are simply taken as some text and that html elements are not going to render in browser.
So you can put the the div element out side the text area.
<textarea id="code"></textarea>
<div id="hello">Hello world!</div>
I hope this will work.. :)
I have a JS script which created a new Node and inserts it to the HTML page. I am handling DOM mutation events and can capture DOMNodeInserted event. Inside that function I want to find out the source (i.e. in which part of the HTML has the script function been called) and the target (i.e. in which part the node is being added in the HTML page).
I am able to find the target using event.target, but I am not able to find the source of the event.
For example, consider the following pseudocode HTML page:
<html>
<head>
<script>
function test() {
//DOM access
<div_object>.setAttribute("attr", "value");
}
</script>
</head>
<body onload="test()">
<div id="123">
</div>
</body>
</html>
I want my source to be BODY (because that is were the script is initiated), target should be div(123) (because the attribute is added to div_123.
How can I do this?
Sorry, you can't find out what piece of code caused an event to be triggered, they're completely decoupled. You would have to have the triggering code co-operate by storing the values of its own this/event.target in a variable for the triggered code to pick up later.
But then if you have co-operation like that, you wouldn't need DOM Mutation Events.
If you have an event handling layer (as is part of many JS frameworks), you could put the this/target tracking in that layer, so the triggered code could ask “what was the last event that fired, before me?”.
But I'm not convinced this would be worth it. It's usually best to add your own co-operative hooks that communicate between components; you can't generally rely on DOM Mutation Events since they're not globally and completely supported (or indeed supported at all on IE<9).
What about
<html>
<head>
<script>
function test(element) {
//DOM access
element.setAttribute("attr", "value");
}
</script>
</head>
<body onload="test(this)">
<div id="123">
</div>
</body>
</html>
?
Interesting. I had a look here (answered to get formatting)
<html>
<head>
<script>
function test(e) {
if (e) var event=e;
//DOM access
var t="";
for (o in event) t+='<br/>'+o+':'+event[o]
document.getElementById('d123').innerHTML=t;
}
</script>
</head>
<body onload="test(event)">
<div id="d123">
</div>
</body>
</html>