We Keep Coding

jquery (hover and load) events binding on dynamically created elements

I am able to bind click event to element with class name keybox. And this element is generated dynamically.
$('body').on('click','.keybox', function(){
// some code here
});
But for same element I tried binding hover and load event using following code:
$('body').on('hover','.keybox', function(){
// some code here
});
$('body').on('load','.keybox', function(){
// some code here
});
....and its not working as expected.
Can someone help with this problem? I want to bind hover and load event to my element with class name keybox and this element is generated dynamically.

Instead of hover, use mouseenter and mouseleave event. Instead of body.load use
$(document).ready(function() {

You can use following approach to bind multiple events and get object information via event object.
$('body').bind('click hover load', '.keybox', function(e){
if ( e.type === 'hover') {
// do something
}
else if(e.type === 'click') {
// do something
}
....
});
Make sure you bind events in $(document).ready(function() {} or load javascript just in bottom of html document body.

Since hover is deprecated you should use mouseenter and mouseleave for load you can write using event using on(load is equivalent to ready).
$(function(){
$(document).on('mouseenter', '.keybox', function () {
$(this).css('color','red');
});
$(document).on('mouseleave', '.keybox', function () {
$(this).css('color','black');
});
$(document).on('click', '.keybox', function () {// click on dynamically loaded events.
$(this).css('color','green');
});
$('#btn').click(function() {
$('#parent').append("<div class='keybox'>sample1</div>");
$('#parent').append("<div class='keybox'>sample2</div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
zdhsdhsau
</div>
<input type="button" id="btn" value="create"/>

JS click in a Jquery function on load

I have a JS function that I want to automatic click in a jquery.click link when page loads.
How can I make it work?
Fiddle
When page loads I want to see the alert, no click in the link needed.
js:
window.onload = function(){
document.getElementsByClassName("c").click();
}
$(".c").click(function(){
alert("ok");
});
html:
test

you need to attach click event before trigger event.
DEMO
Change
document.getElementsByClassName("c")
to
document.getElementsByClassName("c")[0]
Use Below code
$(document).ready(function(){
$(".c").click(function(){
alert("ok");
});
});
window.onload = function(){
document.getElementsByClassName("c")[0].click();
// Or use jQuery trigger
// $(".c").trigger('click')
}

DEMO HERE
trigger click on document.ready
$('document').ready(function(){
$(".c").click(function(){
alert("ok");
});
$('.c').trigger('click');
});

Trigger event right after you create handler
$(function(){
$(".c").click(function(){
alert("ok");
}).click();
});
DEMO

Try this way
$(document).ready(function(){
$(".c").trigger('click');
});

getElementsByClassName Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node.
To assign a click handler, either you will have to iterate through nodelist or just assign event to first element
Try this:
window.onload = function () {
document.getElementsByClassName("c")[0].click();
};
$(".c").click(function () {
alert("ok");
});

So you can push your alert into a function :
function callAlert() {
alert('a');
}
And you can change the event click like this :
$(".c").click(callAlert);
Finally you can call the alert function when page loads like this :
$('document').ready(function(){
callAlert(); // call here
});
Code :
$('document').ready(function(){
callAlert();
$(".c").click(callAlert);
});
function callAlert() {
alert('a');
}

Changing jQuery Event from click to on load

I am using the following onclick function that triggers the object to become full screen when clicked. I want the object to be fullscreen when the page loads without having to click.
fbNav.find('ul li.fullscreen').on('click', function(e){
if(!fullscreen) {
fbFullscreen.show();
fbFullscreen.append(fbCont);
$window.trigger('resize');
} else {
fbParent.append(fbCont);
fbFullscreen.hide();
$window.trigger('resize');
}
fullscreen = !fullscreen;
});
How can i achieve this?

You better put the main logic in a function and call the same function on ready and click.
function fullscreen(){
if(!fullscreen) {
fbFullscreen.show();
fbFullscreen.append(fbCont);
$window.trigger('resize');
} else {
fbParent.append(fbCont);
fbFullscreen.hide();
$window.trigger('resize');
}
fullscreen = !fullscreen;
}
//will be executed when page loads
$(document).ready(function(){
fullscreen();
});
//will be executed on click
fbNav.find('ul li.fullscreen').on('click', function(e){
fullscreen();
});

You can trigger click event on page load.
fbNav.find('ul li.fullscreen').trigger("click");

Bind to event of control within .load() div

I have a jQuery UI dialog whose content is populated using .load(), and then displayed. What I need to do is somehow bind to a button within the loaded HTML to close that dialog.
Code:
<div id="popup">
<div id="popupContent"></div>
</div>
<script>
$("#popupContent").load('some_URL_within_site_that_has_a_button', function () {
$("#popup").dialog("open");
});
</script>
I've tried a few different things, w/o success:
$("#popupContent").find(".CloseButton").on("click", function () {
alert("this worked");
});
$(".CloseButton").on("click", function () {
alert("this worked");
});
Any ideas on how to bind to the dynamically loaded control events?

You are close:
$("#popup")
.dialog("open")
.on("click", ".CloseButton", function() { ... });

Twitter Bootstrap .on('show',function(){}); not working for popover

I am trying to hide all other popovers when a new popover is selected by doing the following:
My HTML
a.btn#requests(rel='popover',data-placement='bottom',data-original-title='<b>Requests</b>',data-content='My content goes here')
My Javascript
$(function (){
console.log('start');
$('#requests').popover();
$('#messages').popover();
});
//This doesn't work for some reason?
$('#requests').on('show', function (e) {
console.log('requests');
$('#messages').popover('hide');
});
$('#messages').on('show', function () {
console.log('messages');
$('#requests').popover('hide');
});
However, my console.log('requests') and console.log('messages'); is never getting shown even though the requests and messages popovers are showing, what am I doing wrong?

Bootstrap now supports popover events - see the Events section in the official popover docs (and here's the doc changelog).
Example:
$('#requests')
.popover()
.on('show.bs.popover', function() { console.log('o hai'); })
.on('hidden.bs.popover', function() { console.log('ciao'); });

The popover plugin doesn't trigger any event. Neither does the tooltip plugin (since popover extends tooltip). Check this issue (github) for alternatives.
You can use different JS events depending on your trigger. For your example : Demo (jsfiddle)
$(function (){
console.log('start');
$('#requests').popover();
$('#messages').popover();
$('#requests').on('click', function (e) {
console.log('requests');
$('#messages').popover('hide');
});
$('#messages').on('click', function () {
console.log('messages');
$('#requests').popover('hide');
});
});
Why 'click' ? Because the default popover trigger for version 2.1.1 is click. See the popover doc (github)
You can use the following events :
trigger: 'click' : on click
trigger: 'hover' : display on mouseenter and hide on mouseleave
trigger: 'focus' : display on focus and hide on blur
trigger: 'manual' : use your own code to display and hide anyway

you can easily do it by using class and haveing less and more organazied codes:
$(document).ready(function(){
$('.btn').popover();
$('.btn').on('click', function (e) {
$('.btn').not(this).popover('hide');
});
});
check my demo here
and if you want to have form control inside customize this code:
var mycontent = '<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'
$('.btn').popover({
content:mycontent,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.stopPropagation();
});
$('.btn').on('click', function (e) {
$('.btn').not(this).popover('hide');
});
});
check the demo here

According to https://getbootstrap.com/docs/3.3/javascript/#popovers-events the name of the event is
show.bs.popover
I tried it, and it works fine

Try this:
$(document).on('click', function(e) {
if (!$(e.target).is('[data-original-title]')) {
$('[data-original-title]').popover('hide');
}
});
$(document).on('show.bs.popover', function(e) {
$('[data-original-title]').popover('hide');
});
This sets a event handler on the whole document and if it's not a popover element it will hide all popovers.
Also, on the event show.bs.popover (triggered prior to opening a popover) it will hide all others.

It's .on('shown') not .on('show')