Well, My problem is described below:
I have this javascript code in order to created a href in a table:
$('#table').html('<a name="example" class="one">One</a><a name="example" class="two">Two</a>');
And then I wanna know which a tag I pressed.... something like this:
$("a[name=example]").click(function(e) {
var example= $(this).attr("class");
alert(example);
}
But this doesn't work...
Could you help me?
Thx 4 advance!
You should use event delegation on() to attach the click event to the fresh DOM (a tags) added dynamically to the page by your script :
$("#table").on('click','a[name=example]',function(e) {
var example= $(this).attr("class");
alert(example);
})
Hope this helps.
$('#table').html('<a name="example" class="one">One</a><br><a name="example" class="two">Two</a>');
$("#table").on('click','a[name=example]',function(e) {
var example= $(this).attr("class");
alert(example);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table">
This is how you should do it.
$("#table").on('click','a[name="example"]',function() {
var example= $(this).attr("class");
alert(example);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<body>
<div id="table">
<a name="example" class="one">One</a>
<a name="example" class="two">Two</a>
</div>
</body>
</html>
Related
Suppose, in my project homepage there are some javascript code. For example,
index.html
<body>
html code here
<script type="text/javascript">
(function () {
some javascript code here
})();
</script>
<button type="button">Delete javascript</button>
</body>
Now, what I want is that, on clicking on the button all content between script tags should be deleted along with script tags. How can I do that?
Could you try putting an ID or Class on your script tag and then onlick find that ID or Class and remove it? Something like:
$('button').on('click', function() {
$('#script-tag-id').remove();
});
Try this:
window.addEventListener('load', function() {
alert(document.body.innerHTML)
document.getElementById('button').onclick = function() {
if(document.getElementById('yourScript')){
var script = document.getElementById('yourScript');
document.body.removeChild(script);
}
alert(document.body.innerHTML);
};
});
<body>
html code here
<script id="yourScript" type="text/javascript">
/*testing*/
</script>
<button id="button" type="button">Delete javascript</button>
</body>
I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my 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(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});
Here is the HTML:
<html>
<head>
<Script type = "text/javascript" src = "CprMdlrSrch.js"></Script>
<link type="text/css"rel="stylesheet"href="CprMdlrSrch.css"/>
</head>
<body>
<div id="main_box">
<p id="instructions"><strong>Please enter a part number to search.</strong></p>
<input id="part_num_search" type="text" name="searchPhrase">
<button id="search_button" type="button" value="button"> <strong>Search</strong></button>
<div id="results"></div>
<script type="text/javascript">
</div>
</body>
</html>
Here is the Javascript:
$(document).ready(function(){
$("#search_button").toggle(function() {
$("#part_num_search").fadeIn("slow");
},
$("#part_num_search").fadeOut("slow");
});
});
I am just unsure what I am doing wrong. I am really just trying to out the button to make sure I am on the right track.
thanks!
-Dustin
I'm not sure you understand how to use the toggle command. Please check out the API documentation: http://api.jquery.com/toggle/
For fade toggling, try .fadeToggle(), which started becoming available since JQuery 1.4.4.
http://api.jquery.com/fadeToggle/
Try something like this:
$(document).ready(function(){
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
});
You'll be better served using http://api.jquery.com/fadetoggle/.
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
I want to alert something in the onclick event of a div .
This is my code:
<script type="text/javascript">
document.getElementById('new_div').click(function() {
alert(1);
});
</script>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
But when loading the page it displays an error:
document.getElementById("new_div") is null
What is the problem in my code?
Edit: This should be a better solution, I'm a bit rusty in JavaScript.
You need to load your JavaScript event handlers after the page is loaded. The simplest way is making your code load when the document finishes loading and the window casts an onload-event.
<script type="JavaScript">
window.onload = function(){
document.getElementById('new_div').onclick = function() {
alert("Good morning, you are very beautiful today!");
}
}
</script>
you defined that div after your javascript code, so when you add your handler the div doesn't exist yet
reverse your code like so
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
<script type="text/javascript">
console.log(document.getElementById('new_div'))
</script>
to correctly attach an event use addEventListener (and attachEvent for IE<9)
or simply use document.getElementById('new_div').onclick = ... (but not recommended since you remove any previous defined handler, if any)
The new_div is not yet loaded when your javascript executes.
Try something like this:
$(document).ready(function()
{
$('#new_div').click(function()
{
alert(1);
});
});
Edit
I assume you use jQuery because you use .click(function() {
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function clicked(item) {
alert($(item).attr("id"));
}
</script>
<div onclick="clicked(this);" id="test">test</div>
I think you jquery solves your problem beautifully.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#new_div').click(function() {
alert(1);
});
});
</script>
your HTML stays the same
try this
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#new_div").click(function(){
alert(1);
});
});
</script>
</head>
<body>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
</body>
</html>
As a jquery-beginner, i should bind a javascript object into my jquery functions, like:
<div title="StackOverflow" onclick="javascript:action(this)">Content</div>
and in action i will handle the "this" :
function action(instance){
example=instance.attr("title");
}
but the "instance" is not a jquery object so i can't work with it. The syntax
example=$(instance).attr("title");
doesn't help me either.
I'd be glad of any suggestions
If you're using jQuery then you should completely separate the definition of your HTML and associated JavaScript. For example
HTML:
<div id="soDiv" title="StackOverflow">Content</div>
JavaScript:
$(document).ready(function() {
$('#soDiv').click(function() {
var example = $(this).attr('title');
...
});
});
this should work...
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
function action(instance){
example=$(instance).attr("title");
alert(example);
}
</script>
</head>
<body>
<a id="test" title="StackOverflow" onclick="javascript:action(this)" href="#">Content</a>
</body>
</html>
// HTML file
<div title="StackOverflow" id="stackoverflow">Content</div>
// JS File
document.getElementById("stackoverflow").addEventListener("click", function () {
var example = this.getAttribute("title");
});
Seperations of concerns
HTML:
<div title="StackOverflow" id="stack">Content</div>
Javascript (with jQuery):
$('#stack').click(function(){
alert(this.title);
});