Javascript is not executed for added html [duplicate] - javascript

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
For a project I'm working on I'm adding records to a list. But a button in the added content does not execute the javascript it is supposed to execute.
I've made a scribble out of it - as simple as I could make it - to demonstrate.
The button "some content to click" fires of an alert like I expect. The button 'some other content to click' does not.
I suspect this has to do with the html not being there on load... but I'm clueless on how to solve this.
Anyway... if you guys are willing to help... here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>scribble</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$('.clickme')
.click(function () {
list = $(this).parents('.container').find('.list');
list.prepend('<div class="record"><button class="record_button">some other content to click</button></div>')
alert('added a record');
});
$('.record_button')
.click(function () {
alert('content clicked');
});
});//]]>
</script>
</head>
<body>
<div class='container'>
<button class='clickme'>add record</button>
<div class='list'>
<div class='record'>
<button class='record_button'>some content to click</button>
</div>
</div>
</div>
</body>
</html>

Try
$('.clickme').on('click',function()..
Listeners don't work for added elements unless you call them like so.
jQuery .on()

Related

JavaScript functions scope and AJAX [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I'm trying to learn how AJAX interaction with jQuery works.
So far I have always worked with multi-page applications and am not very good with JavaScript.
To learn this, I'm creating a small project that implements CRUDs on a MySQL table asynchronously.
I have created two jQuery functions that inject the 'index' and 'create' views into the page.
The problem I have is that the main.js file does not listen to the events that occur in the injected part of the web page.
This is the main html document:
<html>
<head>
<meta charset="utf-8">
<title>MySql AJAX CRUD</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>MySQL CRUD</h1>
<button id="create">Create</button>
<button id="index">Index</button>
<button id="store">Store</button>
<div id="content">
Content goes here...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- jQuery CDN -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
This is the 'main.js' file wich is inside a directory called 'js':
// Index
$('#index').click( function() {
$('#content').load("contents/index.php");
});
// Create
$('#create').click( function() {
$('#content').load("contents/create.html");
});
// Store
$('#store').click( function() {
alert('store function is working'); // Test
});
});
And this is the content 'create.html' i inject into the main html page:
<p>Country name:</p>
<input type="text" id="countryName"><br><br>
<p>Short description:</p>
<input type="text" id="shortDesc"><br><br>
<p>Long Description:</p>
<input type="text" id="longDesc"><br><br>
<button id="store">Store</button>
If i click on the button on 'create.html' nothing happens.
If i click on the button on 'index.html' the store function trigger.
Can someone explain me why?
as said before, you are using jquery to set a callback on an item that is not yet loaded in the DOM. To fix it, you can register the callback once 'create.html' is loaded:
// Create
$('#create').click( function() {
$('#content').load("contents/create.html", function(){
// Store
$('#store').click( function() {
alert('store function is working');
});
});
});

I am facing some problem to load content of text file using jquery ajax [duplicate]

This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Closed 3 years ago.
i have tried a lot but nothing found any help.Please help me..
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Link1|| Link2
<div id="target">&nbsp</div>
<br clear="all" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript">
$(document).ready(function() {
$('#nav1').click(function() {
$('#target').load('home.txt');
});
$('#nav2').click(function() {
$('#target').load('link.txt');
});
)
};
</script>
</body>
</html>
please help me. I want to get the txt file when i click on the link1 and link2
The script tag cannot have the src attribute and a body, you need to use separate script tags.
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#nav1').click(function () {
$('#target').load('home.txt');
});
$('#nav2').click(function () {
$('#target').load('link.txt');
});
});
</script>
This attribute specifies the URI of an external script; this can be
used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.

Mouse over event not being triggered for a jQuery class selected element [duplicate]

This question already has answers here:
Installing jQuery?
(13 answers)
Closed 7 years ago.
I have a div which on my simple page is retrieved through jQuery's class selector. I want to then attach a mouse over event listener to this div...
<body>
<div class="stuffBox">
<h1>
stuff
</h1>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
(function(){
$(".stuffBox").mouseover(function() {
alert("Here is some stuff");
});
})
</script>
</body>
And here is the fiddle https://jsfiddle.net/jehanjaleel/xqtp2r3q/
Right now the mouse over is not firing, any idea why?
I would like to reopen this because it works in jsfiddle but not on an actual html page.
<body>
<div class="stuffBox">
<h1>
stuff
</h1>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
(function(){
$(".stuffBox").mouseover(function() {
alert("Here is some stuff");
});
})
</script>
</body>

Put getElementById() at the bottom [duplicate]

This question already has answers here:
$(document).ready equivalent without jQuery
(39 answers)
Closed 8 years ago.
I have the following code
<html>
<head>
<script>
document.getElementById("txt").innerHTML = "Hello";
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>
and of course the text "Hello" isn't displayed because it's before the div. However because i use egl i can put js code only on head.
Is there any way to fix this?
You need to wait for your page to be ready before your code can execute on markup in the page. For example, use window.onload handler as in the example below. There are nicer ways to do this such as jQuery methods, but this will serve as an example of what you need.
<html>
<head>
<script>
window.onload = function ()
{
document.getElementById("txt").innerHTML = "Hello";
}
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>

addEventListener isn't working [duplicate]

This question already has answers here:
addEventListener not working in javascript
(3 answers)
Closed 8 years ago.
I'm not sure why this isn't working... I'll post what doesn't work first, then I'll post what does work underneath it:
This didn't work:
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('theButton').addEventListener("click", function() {
document.getElementById('myAnchor').innerHTML="<label for=\"Name\">What is your name?</label><input type=\"text\" id=\"Name\"/>";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
});
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" id="theButton" value="Change link">
</body>
</html>
This did work:
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="<label for=\"Name\">What is your name?</label><input type=\"text\" id=\"Name\"/>";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>
I tried this with my little adjustment to the innerHTML at:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml
The main problem is script is load before myAncor object. Therefore you cannot get it with document.getElementById function. You should call this function after load page DOM object.
If you append the script in head, before the html, the html doesn't exists yet when you try to add the event listener. So you need to wrap it in a onload:
window.onload=function(){
//your code
}

Categories

Resources