Develop Reference

Using Jquery, hide a div that is not existing yet, but will exist [duplicate]

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();
});

jQuery on click function not working after appending list items [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I have a simple click event using the on function:
$('#listnav li').on({
click: function(event) {
console.log('hello world')
},
mouseover: function(event) {
// do something
}
});
This is working for the ul list with id "listnav". But when I am adding new entries to the ul using jQuery's append function, this function is not called on the new added list items. How can I fix this?

I have also faced same issue,
While you dynamically append anything (here you are adding new entries to ul), you need to bind its event too. as event is already binded when DOM is loaded and the append is made later on. You need to define the click function within the function of Append after your required append is done.
Hope this helps.

click function after dynamically changing data using .html() [duplicate]

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.

Get the type of element that is focused [duplicate]

This question already has answers here:
How do I find out which DOM element has the focus?
(20 answers)
Closed 8 years ago.
I am building a page with various anchors and form-elements that can be focused and I am wondering how I can get the element that is being focused on currently if something is being focused. I think one way to do it in jQuery is with .is(:focus). I'm looking for either a jQuery or vanilla js solution— just something that works.
Here is what I am trying to do in psuedo-code:
if (something is focused){
get the tag name of that which is currently focused and store that in a variable as a string.
}
else {
alert("nothing is being focused on");
}
Also, if you could answer this question, please do:
Isn't something always focused? Meaning it is the document / body that is focused when no specific elements are or is nothing focused until done so by the code or user?

You can either set a list of elements you care about focus on, or use a wildcard selector:
$(function () {
var focusedEls = [];
$('*:visible').bind('focus', function (e) {
focusedEls.push(e.target);
console.log( $.unique(focusedEls) );
});
});
Fiddle: http://jsfiddle.net/xfwy2/
There are a number of ways to store the elements that were focused, I just chose an array. Also, I'm not sure if you want to keep track of the times each element was focused, but if you do, just ditch the $.unique() for the full list.

Assuming you want to do this with jQuery, you are looking for is the jQuery .prop() method. $(someElement).prop('tagName') will return the tag name of someElement.
Just threw this together, as an example: http://jsfiddle.net/kZbYv/1/

You could use the following:
$('*:focus')

Is there a jQuery event for when elements are added to the document? [duplicate]

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.