This question already has answers here:
Add click function to dynamically created html tags
(5 answers)
Closed 8 years ago.
I am trying to implement a click function inside a div with some nested children tags such as span, td, etc. However, these nested tags are loaded dynamically, mostly using ajax(). The returned result is displayed using .html(data) function. However, once the data is changed and new tags are added, the old javascript written to detect the clicks no longer work.
I want to know if there is a way to make this work?
An example of what i am talking about can be found here.
You are supposed to attach the event handler on the wrapper element like so:
http://jsfiddle.net/V4Sfw/1/
$("#testing").on("click", "span", function() {
alert("now?");
});
$("#testing").html("<span>How about now?</span>");
You could use live to attach handlers that always work, as long you know the structure of the loaded HTML.
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 1 year ago.
I want to hide a div using JQuery on click event of another div. The problem is that the div that I want to hide is actually created only when I click on the existing div.
Let me explain with code example:
HTML:
<div class="first">I already exist and I create the second div when I am clicked</div>
<div class="second">I do not exist yet, I am created when first div is clicked</div>
The above is happening by another piece of code that another developer wrote.
I want to write another piece of code that will hide the second div when its created right after first div is clicked.
I do not have the permission to change the original dev's original code.
My JQuery that is not working:
$(".first").on("click",function() {
$(".second").hide();
});
You should use this, cause you have to make this delegate.
explanation: https://api.jquery.com/on/
$("body").on("click", ".first",function() {
$(".second").hide();
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
Let us say we are adding several elements to the dom. What is the best way to make sure these elements also have a click handler added to them? For example, if I have a click handler on all elements with the class "canvas-section", and I keep adding "canvas-section" elements, what is the best way to make sure in Jquery that these new "canvas-section" elements also have that click handler added.
Before I used to use the "live" jquery function or "on" but those don't seem to work for elements that are dynamically added or added after the original click listener is added.
You can bind the click handler to a parent object, including document, like this:
$(document).on('click', '.div-to-click', function() {
console.log('hi!');
});
See: https://api.jquery.com/on/
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 4 years ago.
I am implementing a simple website which has a toggle sidebar. I want to make the sidebar be hidden when I clicked somewhere on the page except the sidebar. So I think that I should get all elements on the page except a element that has sidebar class. Is there any way to do like that with plain javascript? JQuery has :not() select for this, but I'm trying to not using JQuery... :(
JQuery has :not() select for this
It's actually CSS, although jQuery extends it to allow all selectors (CSS's :not only allows a simple selector within the :not). Yours is a simple selector, so you can use :not:
var list = document.querySelectorAll(":not(.sidebar)");
However:
I want to make the sidebar be hidden when I clicked somewhere on the page except the sidebar.
I wouldn't implement this by setting an event handler on every element. Instead, I'd set a handler on document and then check to see if the event passed through the sidebar on the way to the document, e.g:
document.addEventListener("click", function(e) {
if (e.target.closest(".sidebar")) {
return; // The click passed through the sidebar
}
// close the sidebar
});
That uses Element#closest, which is present on all modern browsers and can be polyfilled for obsolete ones.
This question already has answers here:
How to generate event handlers with loop in Javascript? [duplicate]
(3 answers)
Closed 9 years ago.
I'm working on this currently:
I have a div "out" and a button "in".
Click the button, Create div "extra" and button "extra_b"
At the same time, "out"and "in" hide.
click "extra_b", "out"and "in" appears, and DELETE "extra" and button "extra_b"
Here is the sample:FIDDLE
It can't work, and after I checked console, It probably tells me:
inner.onclick=function(){ add(outer[i]) };
unable to pass the object of current out element to the function correctly:
function add(objectIn){
}
Could you please tell me how to pass the elements to a function in a recursion? And how to modify my current code to make it run correctly?
Thanks a lot!
This is a common problem is JavaScript.
When you are binding the onclick event, you are not using the current value of i but rather when the click happens, the last value of i is used.
So you have to do:
inner.onclick= (function(i){ return function(){ add(outer[i]) })(i);
You can either create a new closure like Darhazer suggested, or you if you don't mind using jQuery you can use jQuery.proxy():
inner.onclick = $.proxy(add, window, outer[i]);
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a jQuery DOM change listener?
Event when element added to page
Is there a jQuery event for when elements are added to the document?
Edits
OK, wait a minute! Geesh! I'm using knockoutjs and it dynamically adds elements. And I have to add something like the following to my text boxes:
$(document).ready(function () {
ko.applyBindings(new EditCatalogViewModel());
});
Further Edits
I guess my question will just have to go unanswered. Thanks SOOO much.
No there is not, if you look at the list of jQuery events, it's not listed. However, you can create your own listener and event if you know ahead of time where the element will be added.