I am attempting to bind a click event after previously unbinding it and I cannot get it to work.
Here is my HTML:
<div class="input-group date">
<input type="text" class="form-control" id="dp1" style="width: 100px; vertical-align: middle" />
<span class="input-group-addon" id="dp1Icon" style="outline-style:none"><img src="<%=context%>/images/calendar-glyph.png"></span>
</div>
The input is actually a bootstrap datepicker component. The span contains a bootstrap glyph that triggers the datepicker to open. I have a radio button group that toggles disabling these like this:
$(".date-wrap input[type='radio']").on("click", function(e){
if ($(e.target).val() == "permanent"){
$("#dp1, #dp1Icon").prop("disabled", true);
$("#dp1Icon").unbind("click"); // Disabled attribute only works on form controls, not spans. So we have to unbind the event
$("#dp1").removeAttr("readonly", "readonly");
}else{
$("#dp1, #dp1Icon, #e3").prop("disabled", false);
$("#dp1Icon").bind("click");
$("#dp1").removeAttr("readonly");
}
});
So, if the value of the radio button they click is "permanent", everything becomes disabled; that works great. Otherwise, I attempt to turn them back on.
The only thing I can think of is that when I try to bind the click event to the glyphicon again, I must define the actual handler that opens the datepicker; like this:
$("#dp1Icon").bind("click", $("#dp1").datepicker('show'));
But all that does is open the datepicker as soon as I click the other radio button. I want it to open only when they click it.
What important piece am I missing here? Does anyone have an idea?
Thanks for any tips.
bind("click") does not magically re-add the event. You need to add it back the event.
$("#dp1Icon").on("click", function(){ $("#dp1").datepicker('show'); } );
You might be better off just setting a flag inside that function and not removing the event.
Related
I have two buttons and one input. The input takes the value of the clicked button. Both buttons have the same class, have one click (Vue) for add active class, and second click. On click take the button's value and append it in the input.
The problem with which I am stuck is that the function for taking the value works after the second triggered click.
I've tried with dblclick and to delete the click for active class - but nothing changed. Can someone give a hand with this? Thank you.
Vue project (js function imported in methods)
<div class="col-md-12 buttons-wrapper" id="direction">
<button id="buy-button" value="1" name="Direction1" class="button btn buy" #click="selected = 1" :class="{active:selected == 1}" v-on:click.capture="buttonDirectionValue">Buy</button>
<button id="sell-button" value="2" name="Direction2" class="button btn sell" #click="selected = 2" :class="{active:selected == 2}" v-on:click.capture="buttonDirectionValue">Sell</button>
<input id="inputDirection" name="Direction" type="text" placeholder="" class="form-control input-md" style="display: block" readonly></input>
</div>
buttonDirectionValue() {
event.preventDefault();
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
});
buttonDirectionValue() {
event.preventDefault();
$("#direction button").trigger("click");
});
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
});
Above should be your code. Correction is to place the .click outside of buttonDirectionValue() function.
If you place the .click inside of buttonDirectionValue() function, the .click will only be registered when the button is clicked for the first time and triggered on the second click.
While placing it outside will bind the .click on page load and trigger the click on buttonDirectionValue() function call.
Hope this helps
The problem obviously is that you bind the click event after the button click
you can bind the click event right after page loads like that:
$(document).ready(function(){
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
}
});
//edit1
you can also remove the v-on:click.capture="buttonDirectionValue"
and use this code to bind click events for both buttons
$(document).ready(function(){
$('button.buy, button.sell').click(function() {
$("#inputDirection").val($(this).val());
}
});
The problem I am having is that the radio buttons in my scenario are not being selected when they are clicked. I have created a JSFiddle to show the code and the issue.
For whatever reason, I have an entire area that is surrounded in an element.
<a href="/link">
//some stuff
<div class="protected">
<input type="radio" name="b1" value="1" /> Button 1
<input type="radio" name="b1" value="2" /> Button 2
</div>
//some stuff
</a>
There is a small section within this tag that needs to be protected from the default behaviour of the link. This section contains some radio inputs which need to be selectable.
The way I currently have it, I am protecting the "protected" section with an event listener and:
$('.protected').off('click').on('click', function (e) {
e.preventDefault();
});
I also have an event listener on the radio buttons so that I can perform the change of property when they are clicked.
$('.protected > :radio').off('click').on('click', function (e) {
$(this).siblings(':radio').removeAttr('checked');
$(this).attr('checked', 'checked');
});
Unfortunately, this is setting the checked attribute in the dom however the radio button is not being filled in on the screen for the user.
Any help would be greatly appreciated.
You need to add stopPropagation()
$('.protected > :radio').off('click').on('click', function (e) {
e.stopPropagation();
//$(this).siblings(':radio').removeAttr('checked');
//$(this).attr('checked', 'checked');
});
Also, make sure to comment out
$(this).siblings(':radio').removeAttr('checked');
$(this).attr('checked', 'checked');
You don't need them as the browser handles this for you.
DEMO
What was happening is, since you had preventDefault in the container click handler, the nested click event was propagating to that click handler and was preventing the radio button from being set.
It seems disabled button "onclick" function is still fired when triggering it programmaticaly, eg:
<div>
<input type="button" onclick="save()" id="saveButton" value="save" disabled="disabled" />
<input type="button" onclick="byPassDisabled()" value="bypass disabled button"/>
<div id="counter">0</div>
function save(){
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
function byPassDisabled(){
$('#saveButton').click();
}
see http://jsfiddle.net/WzEvs/363/
In my situation, keyboards shortcuts are bound to functions triggering the ".click()" on buttons. I'll find it very annoying to have to disable the shorcuts or check if the button is disabled myself. I'd prefer a general solution fixing this problem.
But why? This behavior doesn't seem fair to me.
Any workaround?
The attribute only disables user interaction, the button is still usable programmatically.
So yeah, you gotta check
function byPassDisabled(){
$('#saveButton:enabled').click();
}
Alternatively don't use inline handlers.
$(document).on('click', '#saveButton:enabled', function(){
// ...
});
For future use...the OP code works because jQuery will still call it's own handlers even if the DOM element is disabled. If one were to use vanilla javascript, the disabled attribute would be honored.
const element = document.getElementById('saveButton');
element.click() //this would not work
You can programmatically trigger click on a disabled button.
There are ways to find if the event is a click on button by user or it has been trigger programmatically. http://jsfiddle.net/WzEvs/373/
$(function () {
$("#saveButton").on('click', function (e) {
if (!e.isTrigger) {
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
});
$("#bypassButton").on('click', function (e) {
$("#saveButton").click();
});
});
e.isTrigger is true if you call the click() programmatically. Basically you are triggering the click event manually in code.
You can trigger click still although made it disable .As Spokey said it just shows the user-interaction(the usability still persists that can be turned on programmatically) .
off or unbind the click will solve this issue.
Thanks
I'm trying to create an indicator that pops over whenever the input text is focused. The content of the popover is html.
JS
$('.validate').popover({
html : true,
trigger : 'focus',
content : function() {
return $('#popover-content').html();
}
});
On Change
$('.validate').change(function() {
var eval_me = $('.validate').val();
$('#sample').html(eval_me);
});
The HTML
<div class="input-prepend">
<span class="add-on"><i class="icon-lock"></i></span><input type="text" class="validate" data-placement='right' title="Hello World">
</div>
<div id="popover-content" style="display: none">
<div class="row"><label id="sample">This is your div content</label></div>
</div>
The content inside the label gets updated, but the popover isn't. Dismissing the popover and focusing the input text again (to open it) shows the updated label.
Any help is appreciated :)
Two things: the change event doesn't fire until the input loses focus, you probably want to bind the update code to the keyup event. Second, though that code is updating your sample div, the popover is just getting that data when the popover is triggered; if you want to update the popover's sample div, you need to handle that as part of the keyup event handler. Try changing that event handler like so:
$('.validate').keyup(function() {
var eval_me = $('.validate').val();
$('#sample').html(eval_me);
$('.popover #sample').html(eval_me);
});
and you should be good. Check the fiddle.
Edit: actually playing with it a little, it seems like keyup is a better trigger than keypress, otherwise the update trails the input by one char, but I'm probably just missing something there. Changed the code above accordingly.
I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.
The HTML looks roughly thus:
<button1>Show/Hide</button>
<form>
<input class="hidden" type="text" />
<button2 type="submit">Submit</button>
</form>
<script type="text/javascript">
$("button1.someSelectors").click(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
</script>
I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?
I tried:
$("input.someSelectors").blur(function() {
if (!$("button2.someSelectors").is(":focus")) {
showHide();
}
});
but it hid the form elements even when I tried clicking button2.
An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added
if(!$("button2.someSelectors").click()) {do the hide part of the function}
to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?
--Edit:
var showHide=function(item, category) {
if($("input."+item+"."+category).hasClass("hidden")) {
$("input."+item+"."+category).show("fast").focus().removeClass("hidden");
$("button.buy."+item+"."+category).show("fast");
$("button.purchase."+item+"."+category).text("Never mind!");
} else {
$("input."+item).hide("fast").addClass("hidden");
$("button.buy."+item).hide("fast");
$("button.purchase."+item).text("Purchase");
}
}
blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this
$("button1.someSelectors").mousedown(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})