Develop Reference

Click event after filling textbox

<div class="row" style="padding-bottom:12px;">
<div class="col-md-2">
<div>Instantie</div>
</div>
<div class="col-md-4" >
#Html.TextBoxFor(model => model.Instantie, new { #id = "txtInstantieName", #class = "form-control tt-input", #style = "text-transform:uppercase;" })
</div>
<div class="col-md-1"><button type="button" id="InstantieDetailButton">...</button></div>
</div>
I have text box txtInstantieName after its filled i want click event for InstantieDetailButton button in Jquery. Aftter removing cursor or pressing tab or enter the click event needs to be triggered. Can someone please help.
Solution Working:
$(document).ready(function () {
$("#txtInstantieName").focusout(function () {
$("#InstantieDetailButton").click();
});
});

You have to use focus out event of textbox and then trigger button event as below.
$(document).ready(function(){
$("#txtInstantieName")
.focusout(function() {
$("#InstantieDetailButton").trigger('click');
});
$("#InstantieDetailButton").click(function(){
alert("Button Click Event Fire.");
});
});

You have to use focusout JQuery event to perform your desire action.
This should be something like:
$( "#texboxId" )
.focusout(function() {
console.log('Focus Out Event');
});
For more details please read Jquery Focusout Event

Dynamically create button and then remove that button when clicked in jquery

lHi,
I have some divs in a html doc and when I click the div I am adding a button. eg attached:
HTML:
<div class="week">
<div class="day wk1" id="day1">
<label for="day1">Test</label>
</div>
<div class="day wk1" id="day2">
<label for="day2">Test</label>
</div>
When I add a button by clicking on the div, no problem.
Add Button:
$(".day").click(function (e) {
e.preventDefault();
var check = $("#day7").width() - 2;
var insert = $(this).prop("id");
insert = `#${insert}`;
var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
par.appendTo(insert);
// console.log(insert);
});
When I remove the button by clicking on it it does remove it but simultaneously adds a new button as per the code above and below.
Remove Button:
$(".day").on('click','.testing', function(e){
e.preventDefault();
$(".break").remove;
$(this).remove();
});
I am sure I am doing something silly but for the life of me, I cannot figure it out? Please ignore my incorrect use of id's and classes, this is purely a test to gain experience.
Any help will be most appreciated.
Kind regards
Wayne

The event is getting propagated from the click handler on dom with .testing class to it's parent that is dom with .day class. .day have another click handler which add the element.So after removing the element again $(".day").click(function(e) { is getting fired which is adding back the button element
Replacee.preventDefault(); with e.stopPropagation(); in the click handler of .testing
$(".day").click(function(e) {
console.log('x')
e.preventDefault();
var check = $("#day7").width() - 2;
var insert = $(this).prop("id");
insert = `#${insert}`;
var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
par.appendTo(insert);
// console.log(insert);
});
$(".day").on('click', '.testing', function(e) {
e.stopPropagation();
$(".break").remove;
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="week">
<div class="day wk1" id="day1">
<label for="day1">Test</label>
</div>
<div class="day wk1" id="day2">
<label for="day2">Test</label>
</div>

Your button is present inside the div. So when you click the button, your div click event is also fired. This is due to event bubbling. Check https://www.w3schools.com/jquery/event_stoppropagation.asp
$(".day").on('click','.testing', function(e){
e.stopPropagation();
e.preventDefault();
$(".break").remove;
$(this).remove();
});

get button id on click with fontawesome icons returns undefined

Issue when getting recently clicked button id. Form submit button decorated with fontawesome icons.
Operation:
On body click get button id
Submit form
Concept:
Mouse pointer over button click is working
Issue:
Mouse pointer exactly over button image(example:round arrow icon) click
not working.
Browser Console returning undefined
Any tweaks to make this work? Normally user will attracted by images and they will click over icons only. how fix this?
JSfiddle

Don't use body, only set it to the buttons then.
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
});
});
Working example.
I'm not sure if you want to do more work on the button click. So you could submit the form manually too in the callback. Just change the buttons to type="button" instead of submit and extend the callback:
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
// do your work
// submit the form manually
$("form").submit();
});
});
Working example.

If all you want is the ID of the button that was clicked, why attach the event to the body? I can maybe understand event delegation, but you only have two buttons here. Bind the click handler to both buttons. See http://jsfiddle.net/jvsxo8s0/4/
$(document).ready(function() {
$('button').on('click', function(e) {
target = $(e.target);
buttonclicked = target.attr('id');
console.log(buttonclicked);
e.preventDefault();
});
});

Dont know why you need the id, but you can use the submit() function from jQuery and serialize the form data.
$(function() {
$('#setpolicyform button').on('click', function(e) {
e.preventDefault();
// get button id
var buttonId = $(this).attr('id');
// form data
var formData = $('#setpolicyform').serialize();
console.log(formData);
// check the clicked id
if(buttonId === 'save') {
console.log('save');
} else {
console.log('send');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form role="form" method="POST" action="#" name="setpolicyform" id="setpolicyform">
<div class='box-body pad'>
<div class="form-group">
<div class="lnbrd">
<textarea class="textarea form-control" placeholder="Enter text ..." name="policyta" style="width: 510px; height: 200px;"></textarea>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="button" class="btn btn-danger pull-right" id="save"><i class="fa fa-save"></i> SAVE</button>
<button class="btn btn-success" type="button" id="send"><i class="fa fa-arrow-circle-right fa-lg fa-fw"></i>Send</button>
</div>
</form>
</div>

Use this
$(document).ready(function() {
$('body').on('click', function(e) {
target = $(e.target);
buttonclicked = target.closest("button").attr('id');
console.log(buttonclicked);
});
});
Updated Fiddle is here http://jsfiddle.net/jvsxo8s0/6/

Moving button doesn't receive click event

I have a text field which should hide when it loses focus. I also have a button. The problem is, when you click the button, the text field first loses focus, which moves the button, preventing it from receiving the click event.
HTML:
<div>
<p> Focus on the text field, and then click the button </p>
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br><br><br>
</div>
<button id="clickMe">click me</button>
</div>
JS:
$(function() {
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
});
$('#clickMe').on('click', function(e) {
alert('clicked!');
});
});
http://jsfiddle.net/u86ycf5e/
The button should still move. But it should also receive the click event.

Add a container with a height around the element you are hiding: Fiddle
.container {
height: 50px;
}
HTML
<div class="container">
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br>
<br>
<br>
</div>
</div>
Alternatively, you could make the element hide after a short delay via setTimeout like so:
$('#focusMeOut').on('focusout', function (e) {
setTimeout(function() {
$('#hideMeOnFocusOut').hide();
}, 250);
});
Other fiddle

Try ...
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
if (e.relatedTarget.id==="clickMe") {
$("#clickMe").trigger('click');
}
});
This will check to see if the button was clicked and fire it ...

Hide the text box instead with:
$('#focusMeOut').on('focusout', function(e) {
$(this).hide(); //this line changed
});
and optionally set the height of the <div> to prevent button moving with this CSS:
#hideMeOnFocusOut {
height:80px;
}
You might want to rename your IDs more appropriately now.
http://jsfiddle.net/u86ycf5e/4/

Why I have to click twice to show Div using jquery?

I have a button that I should show a message in front of it so i'm using the following jq code:
<script type="text/javascript">
$("#msg").html(data);
var pos = $("#answer2ticker").offset();
$("#msg").offset({top: pos.top, left: pos.left});
$("#msg").show();
</script>
<div class="alert alert-danger" id="msg" style="position: absolute;" hidden="hidden" onclick="$(this).hide();"> </div>
THE PROBLEM:
the message shows the first time normally, but when I hide it and try to show it again, I have to click on show twice.
so hiding is normal, but showing has to be called twice.

Why dont you just use jQuery toggle function?
$( document ).ready(function() {
var data = "test";
$("#msg").html(data);
$("#answer2ticker").click(function() {
$('#msg').toggle();
});
});
Example: http://jsfiddle.net/acidrat/LbEVL/1/