Develop Reference

On load of a dynamic control in Jquery

I want to change the attr/css of a dynamically added control according to the value of another dynamic control.
For eg.
HTML
<input type="button" id="btnAdd" value="Add Div"/><br/><br/>
Script
$(document).ready(function() {
$('#btnAdd').on('click', function(){
$('<div>Red</div><br/>').appendTo('body');
});
});
At document.ready, the dynamic controls are not loaded. I have to perform my code after the dynamic controls are loaded to DOM.
I was trying the below code but didn't work
$('div').on('load', function() {
$('div').css('color', 'red')
});
Please treat the above code as an example only. From the above eg, I am expecting to do my code in the load event of my dynamic control and not on the click event of the button. (Jquery version 1.7)
Eg 2.
See Here, The "Fired On Load." is not logged.
EDIT :
This is what exactly I am trying to do but not working.
$(document).ready(function () {
$(document).on('load', '#TimeRangeCondition #StartTime', function () {
$(this).attr("placeholder", "00:00").blur();
});
});

Try this way:
$(document).on('load', 'div', function() {
$(this).css('color', 'red')
});

How to trigger Bootstrap fileinput change event?

I am using fileinput control managed by this js in my project. I want to validate if fileinput has file or not. For that, I am trying to trigger change event of fileinput control. But change event is not being triggered. This is my fiddle. Below is my change event to catch changes done to Fileinput.
$(document).ready(function() {
$(document).on('change', '#testImageInput', function () {
alert($(this).val());
});
});
Thank you for suggestions and answers.

here is the updated fiddle link check it
https://jsfiddle.net/b7059pk1/2/
$('#testImageInput').change(function () {
alert($(this).val())
});

It depends on the jQuery version, try this:
<script type="text/javascript">
$(function() {
$("#testImageInput").change(function (){
alert($(this).val());
});
});
</script>

It is always better to target element directly instead of whole document.
Updated fiddle --
https://jsfiddle.net/b7059pk1/1/
$(document).ready(function() {
$("#testImageInput").on('change', function () {
alert($(this).val());
});
});
P.S : I have used jquery 3.2.1 in the updated fiddle

remove() is working on only first div not on rest dynamically added fields

I am trying to remove the HTML field but remove is not working on dynamically added fields.
$('.delete-ques').on('click', function() {
alert('hello');
$(this).parent().remove();
return false;
});
https://jsfiddle.net/gp2gwana/3/
Try to add div and remove

You need event delegation for attaching events to dynamically added elements:
$('#clone-ques').on('click','.delete-ques', function() {
alert('hello');
$(this).parent().remove();
return false;
});
Working Demo

do this
$('body').on('click', '.delete-ques', function() {
// do something
});
You will find some good example
here and here

Use document.on click event for delete on dynamically added elements:
.on used for single handler for all elements that match your selector, including the ones created dynamically.
Demo : https://jsfiddle.net/7s05cdoy/
$(document).on('click','.delete-ques',function() {
$(this).closest('.parent-question').remove(); // using closest you can get parent of this link
return false;
});

You may used $(doument)
$(document).on('click','.delete-ques', function() {
alert('hello');
$(this).parent().remove();
return false;
});
Your working code https://jsfiddle.net/gp2gwana/5/

Everything is perfect in your code. except below line
$('#select-question'+i).selectize({create: true});
Try your existing code by commenting above line of code.
I seen an error in console
Uncaught TypeError: $(...).selectize is not a function
Edit
You should below line of code before return false inside
$('.delete-ques').on('click', function() {
$(this).parent().remove();
return false;
});
Try updated jsfiddle

Working with dynamic jQuery

I was wondering how to make this trigger work as I've tried all I can, but can't seem to find out the problem.
HTML
<div id="testFunc">Change AHref Class</div>
test
JavaScript
$(function () {
$("#testFunc").click(function () {
$('#testLink').removeClass("button");
$('#testLink').addClass("button2");
return false;
});
});
$(function () {
$(".button2").click(function () {
alert('test');
return false;
});
});
Somehow, the upon triggering testFunc which changes the source dynamically which causes the a href class to change from button to button2, it doesn't seem to register when i use button2 click.
Is there anyway to solve this?
Thanks!

Try .on()
Use Event Delegation.
$(document).on('click','.button2',function(){ code here });
Syntax
$( elements ).on( events, selector, data, handler );
Demo Working Fiddle , Problem Fiddle

Select all elements except ... in jQuery

I am working on a project, what includes a smartsearch engine.
I'd like to write a method what makes the client write inside the smartsearch, even when it's not focused. F.e. browsing the site, the client hits down a key, and the focus jumps to the smartsearch.
That's working fine with this simple code:
$(document).ready(function()
{
$("*").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But, yeah as You can see, it unfocuses other inputs too, and that's not the way I want it.
I have tried several 'possible-solutions', like :not() and even .not() method like:
$(document).ready(function()
{
$("*").not("input").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But it still unfocuses fields with "input" tagname too. What should I do to force jQuery not to select input fields for this event listener?
Thanks, Steven.

$(document).keydown(function() {
if (!$('input').filter(':focus').length) {
$('#b').focus();
}
});
Working fiddle

$(document).ready(function () {
$(document).keydown(function (e) {
$("input.ss-24#b").focus();
});
});
Does this work?
http://jsfiddle.net/Xbbu8/