This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I have JQuery included and all my other click functions work. I have tried to debug and change it from class to ID and both the class and ID name is unique (no other element uses the class or ID).
<button type="button" style="margin-left: 5px; padding: 7px;" class="btn query-btn"> Search Transactions </button>
Here is my code for the HTML and my JQuery is:
$(".query-btn").click(function () {
alert("gets here");
});
I literally have no idea why this isn't working because it works on everything else. Could anyone possibly point me the right direction? I have tried giving it an ID (unique) and changing the . to a # and that does not work either and yes it is wrapped in a:
$(document).ready(function () {
I receive no errors which is what is sort of confusing me. Anything would be appreciated!
Note: The HTML button is actually added by AJAX (A button is pressed and the response is directly inserted using the innerHTML), not default page load. I'm not sure if this would effect it but just a note incase it does.
If the button is added by Ajax then you need to use on and an enclosing selector, roughly:
$('body').on('click', '.query-btn', function () {
// Whatever
});
(I'm using body as an example selector, ideally you'd scope it to something much smaller.)
Related
This question already has answers here:
jQuery() not finding elements in jQuery.parseHTML() result
(7 answers)
Closed 4 years ago.
I have a js object that has a parameter that defines the layout in HTML. While constructing the page I use jQuery to modify that layout parameter before drawing it on screen. For some reason when I try to use jQuery selectors against the object it is not finding anything.
Here I have used the browser console to show the object parameter:
$(Students_OE_Programs.layout)
(3) [div.test, text, div#student_programs_pb1_holder.pickboxHolder]
0:div.test
1:text
2:div#student_programs_pb1_holder.pickboxHolder
length:3
__proto__:Array(0)
Now I use jQuery to select all divs from this object. As you can see above there should be 2, but I get none:
$('div',Students_OE_Programs.layout)
r.fn.init [prevObject: r.fn.init(3)]
I have also tried:
$(Students_OE_Programs.layout).children('div')
r.fn.init [prevObject: r.fn.init(3)]
The most puzzling this about this is that I have done the exact same thing in other parts of the same page and it works just fine. Any help would be appreciated. I apologize if this question has been asked, I have found it difficult to search for.
Updated to include sample below. As you can see the layout contains the two divs, but the jQuery.append is not finding anything to match so it isn't appending any of the spans.
var Students_OE_Programs = {
layout: null
}
$(document).ready(function() {
var l = '<div class="test">Programs</div>\
<div id="OEPrograms_holder" class="pickboxHolder"></div>';
Students_OE_Programs.layout = $.parseHTML(l);
console.log(Students_OE_Programs.layout);
$('div',Students_OE_Programs.layout).append('<span>test</span>');
$('body').append(Students_OE_Programs.layout);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
</body>
</html>
This is indeed answered by the linked question:
The $(selector, $.parseHTML(data))-style lookup uses $.find. Since I'm looking for an element that's top-level in this jQuery object, I should use $.filter instead. Voila.
In other parts of the project I am not looking for top-level elements, which works just fine.
Thank you all for your help!
This question already has answers here:
How to add click event to an element?
(4 answers)
Closed 5 years ago.
Whenever I open a page I am working on, the page makes a lots of amount of doms using javascript, and each one looks like this:
<span class="link img">text</span>
Let me say I assign one of them to a variable called a, for temporary.
I have another function that is to put every of them, including the a, an onclick event, which should be written in the HTML code page, so I can store the whole page and load it later.
The moment it attaches is before loading the doms into document body. Creating doms, and then this function attaches onclick on them, and then load them in the document body.
What it is supposed to do is making this a to:
<span class="link img"
onclick="function(){window.open('http://example.com')}">
text
</span>
So clicking a opens a new window. I made a CSS so every 'link' class looks like a link anyway.
I tried contain one of these into the function to achieve the above change:
a.onclick = function(){window.open('http://example.com')};
,
a["onclick"] = function(){window.open('http://example.com')};
,
const openFunc = function(){
window.open('http://example.com')
};
a["onclick"] = openFunc;
I don't know why, they don't attach onclick property on a.
I didn't understand what you are saying but if you want to add a event on variable 'a' which have the object reference of an element:
Use a event listener
a.addEventListener("click",funcNametocall,false);
read about it here
http://www.w3schools.com/js/js_htmldom_eventlistener.asp
Thomas' reply made me look back at the anchor tag once more time, and it awkwardly solved the problem.
Here's what I put in the function that is to make every one of the doms to a link one:
actually changed 'span' tag to 'a' tag.
I could use a['href'] = 'http://example.com'; to add the link to the tags, or doms, and leave it in HTML code.
Hello Put these code in your head section
<script type="text/javascript">
function openWindows(argument) {
window.open('http://example.com')
}
</script>
and replace your span tag with the following code...
<span class="link img" onClick="openWindows();">text</span>
May check this code and it work, I hope this will also help you.
This question already has answers here:
How to execute a jQuery code [closed]
(2 answers)
Closed 8 years ago.
I found this function:
function squarifyMe(element) {
squareItUp()
window.onresize = function(element) {
squareItUp();
}
function squareItUp() {
$(element).height($(element).width());
}
}
with this call:
$(document).ready(function() {
squarifyMe('.myElement');
});
but don't know how to add it to my webpage...
I've done this a bunch of times but can't get it to work.
The function named squarifyMe() uses jQuery.
This means the first thing you have to do is import jQuery.
The easiest way to do that is to use a hosted library.
To use Google's hosted version of jQuery, add this to your html page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Alternatively, you could download jQuery and include it yourself.
.
.
.
Now to explain the second piece of code:
$(document).ready(function() {
squarifyMe('.myElement');
});
The first line basically says "execute the following code when the page is ready."
You can learn more by reading the documentation for $(document).ready().
.
.
.
Now to explain the next piece of code:
squarifyMe('.myElement');
function squareItUp() {
$(element).height($(element).width());
}
The first line above invokes the function squarifyMe() with a string as a parameter when the document is ready.
Inside squarifyMe() the function squareItUp() is invoked.
It does the following (piece by piece):
$('.myElement')
This code selects all elements in the document who have the css class myElement.
All such elements are returned as a set, which is manipulated by the chained jQuery code that follows.
You can learn more about selecting DOM elements by class here.
Let's rewrite this line of code for clarity:
$(element).height($(element).width());
We'll rewrite it like this:
var $s = $(element);
$s.height($s.width());
Now $s equals the set of DOM elements who have the css class myElement.
In the second half of the line, we GET the width of each element in $s like this:
$s.width()
You can learn more by reading the documentatino for jQuery.width().
We then SET the height of that element to equal its width like this:
$s.height($s.width());
This will make every element with the class myElement a square.
.
.
.
Now to explain the last piece of code:
window.onresize = function(element) {
squareItUp();
}
This code registers an event handler for window.onresize.
In other words, it causes squareItUp() to get invoked whenever the user resizes the browser window.
So... Every time you resize your browser, every DOM element with the class myElement will become a square.
You can learn more by reading the documentation for window.onresize.
You need to put the whole code in script tags and import the jquery library.
Make sure that the element you want to "square" has the class "myElement". If it has the id "myElement", you need to change ".myElement" to "#myElement".
Oh, and you need to resize the page to run the function.
Try it.
squarifyMe.call('.myElement');
I have 5 windowDiv on my page that have a button with id "#button". The button's purpose is to change the size of the windowDiv. The windowDiv has a large version (called windowDiv) and a small version (windowDivSmall).
The top container div of the page is called topContainerDiv.
The problem is that I can't get this to work for just one windowDiv, let alone all 5 of them. I know I need to use topContainer.replaceChild(windowDiv, windowDivSmall); but I just can't get it to work.
What I currently have is the following:
$("#button").click(function() {
$(topContainerDiv).replaceChild(this.windowDivSmall, this.windowDiv);
// The code above is broken and doesn't work. Help!
});
I suspect you to use 5 #button.
You cannot.
change in HTML id="button" for class="button" and update your jquery :
$(".button").click(function() {
// correct jquery functions to call here :)
});
replaceChild is a JavaScript function. You are calling this function on a jQuery object. You could try the jQuery replaceWith method`: http://api.jquery.com/replaceWith/
This question already has answers here:
Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
(2 answers)
Closed 3 months ago.
I'm making a multi file uploader using ASP.NET, and i know that IE doesn't support multiple attribute inside <input type="file"/>.
So i wrote a jQuery code which checks if the user uses IE or not. If yes then show a button that let's the user add more than one file upload control, so he can upload more than one file too.
The problem is, When user clicks on that link to generate the <input/> control, and then clicks again to add a third one. Nothing happen! .. Only one control is added so it'd be two controls to use. Not more, no matter how much he clicks no more <input/> controls is added.
Here's my code :
$(function () {
if (!('multiple' in document.createElement('input'))) {
var add_btn = $("<a href='#'>Add more photos</a>").insertAfter("#ContentPlaceHolder1_upload_lbl");
var upload_pnl = $('<input type="file" runat="server"/>');
var upload_holder = $("#fileinput_placeholder");
add_btn.on("click", function () {
upload_holder.append(upload_pnl);
alert("click event called(debugging)");
});
}
});
Here's a picture of the node tree of that portion :
On the click event you are appending upload_pnl, and each consecutive click you are appending the same element, hence you only get 2.
To add more you either need to create the element inside the click event callback, or maybe use something like the jquery clone function to create a new one.
var upload_pnl = $('<input type="file" runat="server"/>');
var upload_holder = $("#fileinput_placeholder");
add_btn.on("click", function () {
upload_pnl.clone().appendTo(upload_holder);
alert("click event called(debugging)");
});
Also as fscan pointed out the runat="server" wouldn't make this new element accessible in the code behind as the page is now client side.
First, you have to create a new element every time you insert it with append. Append will move the element from the old parent.
Secondly, runat="server" afaik is a asp.net attribute and does absolutely nothing in html. You would have to do the posting and stuff yourself if you create the elements with javascript.