We Keep Coding

using jscolor.js after button click

if I want to use jscolor.js in HTML or in jquery function but it does not work after button click
$(document).ready(function() {
$('#click').click(function () {
$("#placeholder").html("<input class=jscolor value=714BAB>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>
it works in html but does not after button click

Try this
What I have done is re initialize the jscolor by adding jscolor.installByClassName("jscolor");
Run the snippet and see for yourself.
$(document).ready(function() {
$('#click').click(function () {
$("#placeholder").html("<input class='jscolor' value='714BAB'>");
jscolor.installByClassName("jscolor");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
Color: <input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>

You could create the element and append it dynamicly like this. You can use the fromString method to set the right color.
$(document).ready(function() {
$('#click').click(function() {
var input = document.createElement('INPUT');
var picker = new jscolor(input);
picker.fromString('714BAB');
$("#placeholder").empty().append(input);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
Color: <input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>

Bootstrap 3 Tooltip flickers

I have a Bootstrap 3 button with a tooltip. When clicking the button the tooltip shows and then fades out. When clicking a 2nd time the tooltip flickers and does not nicely fade out. But when clicking the 3rd time the behavior is like expected again.
Update: The below code works fine with Bootstrap 3.0.0, but not with Bootstrap 3.3.7.
$('[data-toggle="tooltip"]').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(node, message) {
node.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip(node) {
setTimeout(function() {
node.tooltip('hide');
}, 1000);
}
$('.btn').on('click', function() {
var node = $(this);
var msg = node.attr('data-title');
setTooltip(node, msg);
hideTooltip(node);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type='button' class='btn btn-primary' data-title='Tooltip' data-toggle='tooltip'>Click me</button>

You should use trigger: 'manual' so you can control how the tooltip is shown or hidden.
$('[data-toggle="tooltip"]').tooltip({
trigger: 'manual',
placement: 'bottom'
});
function showTooltip(node) {
node.tooltip('show');
}
function hideTooltip(node) {
setTimeout(function() {
node.tooltip('hide');
}, 1000);
}
$('.btn').on('click', function() {
var node = $(this);
showTooltip(node);
hideTooltip(node);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary" data-title="Tooltip" data-toggle="tooltip">Click me</button>

Here you with a solution
$('.btn').on('click', function() {
var node = $(this);
var msg = node.attr('data-title');
node.attr('data-original-title', msg)
.tooltip('show');
setTimeout(function() {
node.tooltip('hide');
}, 1000);
});
$('.btn').on('mouseleave', function() {
$(this).tooltip('hide');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type='button' class='btn btn-primary' data-placement='bottom' data-title='Tooltip' data-toggle='tooltip' data-trigger='manual'>Click me</button>
Hope this will help you

how to add a button as html to a div and add click function

In the following code the button "alt2" shows up but does not alert "hi"
Is this the proper way to add a button?
<body>
<div id="test"></div><br>
<button id="add">add</button><br>
<button id='alt'>alt1</button>
<script type="text/javascript" >
$(function(){
$("#add").click(function(){
$("#test").html("<button id='alt2'>alt2</button>");
});
$("#alt").click(function(){
alert("hi");
});
});
</script>

on("click")... for the second alt2 is missing. also i would suggest you use on("click")... instead of .("click") . .("click") this one may miss to fire the second time
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="test"></div><br>
<button id="add">add</button><br>
<button id='alt'>alt1</button>
<script type="text/javascript" >
$(function(){
$(document).on("click", "#add", function(e) {
e.preventDefault();
$("#test").html("<button id='alt2'>alt2</button>");
});
$(document).on("click", "#alt", function(e) {
e.preventDefault();
alert("hi 1");
});
$(document).on("click", "#alt2", function(e) {
e.preventDefault();
alert("hi 2");
});
});
</script>
</body>

$("#add").click(function() {
$("#test").html("<button id='alt2'>alt2</button>");
});
$("#alt").click(function() {
alert("hi");
});
$(document).on('click',"#alt2",function() { // use .on()
alert("hi 2");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test"></div>
<br>
<button id="add">add</button>
<br>
<button id='alt'>alt1</button>
Use .on() for dynamically added elements.
Description: Attach an event handler function for one or more events to the selected elements.

How to simulate the click event

I have the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/tau.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<body onload="clickButton();">
<div class="ui-page" id="page_webkitui">
<header class="ui-header">
<h2 class="ui-title">Webkit UI demos</h2>
</header>
<div class="sample">
<input type="time" id="input_webkitui_hiddentime"
style="visibility: hidden; width: 50px"></input>
<div>
Hidden time:
<button class="ui-btn" id="button_webkitui_hiddendateopener"
style="display: block" onclick="alertTime()">Open timepicker</button>
<span id="webkitui_hiddentime_value"></span>
</div>
<script>
function alertTime() {
alert("fff");
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.click();
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
}
function clickButton() {
$(function() {
document.getElementById('button_webkitui_hiddendateopener').click();
//$('#button_webkitui_hiddendateopener').click();
});
}
(function() {
var page = document.getElementById("page_webkitui");
page.addEventListener(
"pagecreate",
function(ev) {
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
});
}());
</script>
</div>
</div>
<script type="text/javascript" src="js/tau.js"></script>
</body>
</html>
I want to "force" the button_webkitui_hiddendateopener button to be clicked once my page is loaded... (a timepicker is shown normally as a new window).
I implement two functions clickButton() and alertTime(), as a result: only the ffff alert is shown but the new window of the timepicker didn't show up.
What's wrong?
Thanks in advance!

$(document).ready( function() {
$('#button_webkitui_hiddendateopener').trigger("click");
});
Use trigger http://api.jquery.com/trigger/
Live Demo

jQuery .on not quite working to detect clicks?

I guess I am not doing this right. Why doesn't the .on function work here?
<html>
<head>
</head>
<body>
<button type="button" class="close" data-test="test">TEST BUTTON</button>
<a href="javascript:void(0);" class="close" data-test="test">TEST LINK</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$("document").on('test', '[data-test="test"]', function() { alert("got test!!!"); });
</script>
</body>
</html>

document is a object not a string,
change $("document") to $(document). Fiddle: http://jsfiddle.net/DUn5f/

Change to:
$(document).on('click', '[data-test="test"]', function() {
alert("got test!!!");
});

As this is button is no being added dynamically the easiest solution would be
$(".close").click (function() { alert("got test!!!"); });

try this:
jQuery(document).ready(function($){
$(document).on('click', '[data-test="test"]', function() { alert("got test!!!"); });
});
DEMO: http://jsfiddle.net/uSQg6/
change your html structure to this:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(document).on('click', '[data-test="test"]', function() { alert("got test!!!"); });
});
</script>
</head>
<body>
<button type="button" class="close" data-test="test">TEST BUTTON</button>
<a href="javascript:void(0);" class="close" data-test="test">TEST LINK</button>
</body>
</html>