I have some inputs and a button. I want to implement function which allows to delete one of recently focused/focused out input.
I set onfocusout function which sets a click listener on button. If I focus on first input then focus out from it and click on button - works fine. But when I focus on first input, then on second and click on button - i get deleteCell() function performed n times i focused out.
How to let it remember only last onfocusout event? It seems to count my onfocusout events before clicking on button.
Thank you.
var input = document.createElement("input");
input.setAttribute("onfocusout", "myFunction()");
function myFunction() {
document.getElementById("delete-cell").addEventListener("click", function () {
deleteCell();
});
}
function deleteCell() {
alert(1);
}
Try adding an on-focusout listener to the relevant class of elements, and then add a "to-delete" class for the element focusedout (using "this" property). But only add this "to-delete" class after you have first removed it from all elements. This should keep you dialed into the element related to the most recent focusout event.
$(".element-class").on("focusout", function() {
$(".element-class").removeClass("to-delete");
$(this).addClass("to-delete");
})
Then simply write a function that will delete the element with the "to-delete" class, triggered by an on-click event.
Here is fiddle: https://jsfiddle.net/gbrodzik/ej4czqrc/6/
Related
My HTML page has a Button and a Select Drop-Down (Combo Box). Drop-Down change event is like this:
$('#DDL_ID').on('change', function (e) {
// Some Code Here
});
When I click the button, I am setting some value to Drop-Down and it is working fine.
$('#BTN_ID').on('click', function (e) {
$('#DDL_ID').val('123');
});
When I click the button, Drop-Down value is getting changed but Drop-Down change event is not firing. Can anyone help me on this?
Please note this is not a duplicate question.
Setting the val() through jquery will not automatically trigger the event on the item... so you need to manually trigger() it...
$('#BTN_ID').on('click', function (e) {
$('#DDL_ID').val('123').trigger('change');
});
I have a cell <td>:
And I have a script in jquery that when you double click it, it creates an <input type="text"> like this:
$("td").dblclick(function(event){
event.stopPropagation();
if($(event.target).prop("id")!="inputeditar"){ //WHEN I DOUBLE CLICK IN THE CELL
// I paste the value of the cell into the value of the input
$(document).one("click",function(event2){ //IF I CLICK OUT OF THE INPUT
if($(event2.target).prop("id")!="input")
{
$("#input").remove(); //THEN I REMOVE IT
}
});
}
});
So If I double click on the space in the cell, then the input gets the text from the cell, and if I click outside of the input then it dissappears.
It works fine but if I click in the input (instead of outside) then it will never dissappear whenever I click outside of it. I would like to keep checking if I am clicking outside and then, removing the input.
Add events inside event handlers is generally a bad idea, but you can acheive what you want like this:
$(document).on("click",function(event2) {
if ($(event2.target).prop("id")!="input")
{
//IF I CLICK OUT OF THE INPUT
//THEN I REMOVE IT
$("#input").remove();
$(document).off("click");
}
})
However $(document).off("click") seems like a really bad idea!
Following KevinB's comment about naming event handlers, you should be able to add a namespace to the event handler and turn it off as required:
$(document).on("click.removeinput",function(event2) {
if ($(event2.target).prop("id")!="input")
{
//IF I CLICK OUT OF THE INPUT
//THEN I REMOVE IT
$("#input").remove();
$(document).off("click.removeinput");
}
})
(but I've personally never used event namespaces, so see how it goes)
Alternatively you can re-attach the one() by using a named function, eg :
..."dblclick".., function() { ...
$(document).one("click", removeinput);
function removeinput(e) {
if ($(e.target).prop("id")!="input")
{
//IF I CLICK OUT OF THE INPUT
//THEN I REMOVE IT
$("#input").remove();
}
else
$(document).one("click", removeinput);
};
In my program an area called 'validDrop' is highlighted for the user to drag and drop items into.
A new area is highlighted when the button, 'minibutton' is clicked.
I want to tell the program to only allow the button to be clicked if the current area (validDrop) is styled by 'wordglow2' and 'wordglow4'.
I have tried this, Why won't it work?
if ($(validDrop).hasClass('wordglow2', 'wordglow4')) {
$('.minibutton').click(true);
} else {
$('.minibutton').click(false);
}
Because hasClass doesn't take more than one parameter, and because .click either triggers a click or binds a click listener, it doesn't set clickability.
Depending on what .minibutton is, you could do something like:
var valid = $(validDrop).hasClass('wordglow2') && $(validDrop).hasClass('wordglow4')
$('.minibutton').prop('disabled', !valid);
If it's not a type that can be disabled, you might consider something like this:
$('.minibutton').toggleClass('disabled', !valid);
And bind the click listener like so:
$(document).on('click', '.minibutton:not(.disabled)', function() {
// click action here
});
As ThiefMaster points out in comments, $(validDrop).is('.wordglow2.wordglow4') is a functionally equivalent way of checking that the drop has both classes.
You can alsou use .bind() and .unbind() to add and remove click event to your button as in my example http://jsfiddle.net/Uz6Ej/
I have the following html code:
<input type="text" id="theInput" value=""/>
Click me
I want to detect when the input changes and perform an operation in this case, but ONLY when the user has not clicked in the link. I have tried this:
$('#theLink').live('click', function(){
alert('click');
});
$('#theInput').live('change', function(){
alert('change');
});
However change is always executed before click when the value in the input changed, due to Javascript event precedence rules, and therefore only "change" message is displayed.
I would like it to display change only if the input value changed and the user exited the input clicking in any other place instead of the link. In that last case I would like to display click.
The example is here.
I use jQuery 1.6.4.
As far as I know, the click event fires after the blur and change events in every browser (have a look at this JSFiddle). The order of blur and change is different across browsers (source: Nicholas Zakas).
To solve your problem, you could listen to click events on the document and compare the event's target with #theLink. Any click event will bubble up to the document (unless it is prevented).
Try this:
var lastValue = '';
$(document).click(function(event) {
var newValue = $('#theInput').val();
if ($(event.target).is('#theLink')) {
// The link was clicked
} else if (newValue !== lastValue) {
// Something else was clicked & input has changed
} else {
// Something else was clicked but input didn't change
}
lastValue = newValue;
});
JSFiddle: http://jsfiddle.net/PPvG/TTwEG/
Both events will fire but in your example the alert in the onchange event handler fired when the onmousedown event occurs will stop the onmouseup event required for the onclick event to fire. Using console.log will show both events firing.
http://jsfiddle.net/hTqNr/4/
Ok, now i got it, you could do
$('#theLink').live('click', function(e){
alert('click');
});
$('#theInput').live('change', function(e){
//Check if the change events is triggerede by the link
if(e.originalEvent.explicitOriginalTarget.data === "Click me"){
//if this is the case trigger the click event of the link
$('#theLink').trigger("click");
}else{
//otherwise do what you would do in the change handler
alert('change');
}
});
Fiddle here http://jsfiddle.net/hTqNr/19/
why you dont pick the value of input box. you have to store initial value of input box on ready function
initialvalue= $('#theInput').val();
then compare the value
$('#theLink').live('click', function(){
var newvalue =$('#theInput').val();
if(newvalue!=initialvalue) {
//do something
}
});
http://jsfiddle.net/wmuYq/
I want to eliminate an awkwardness: the user has to click the submit button twice to submit the text.
What should I do to make it work with one click?
You can set a timeout: http://jsfiddle.net/wmuYq/1/
document.getElementById("text1").onblur = function () {
var target = this;
setTimeout( function () {
target.style.height='36px';
}, 250);
}
You could use the onmousedown event on the submit button to submit the form:
document.getElementById("submitButton").onmousedown = function() {
this.form.submit();
}
For the above example to work, you would need to give the button an ID. Also, you would need to change the name of the submit button from "submit" to something else, because otherwise it overwrites the submit property of the form element.
This works because the mousedown event will be triggered on the button before the blur event is triggered by the textarea.
Here's a working example.
Well for one thing you have no form, so I am not sure how it submits at all.
Wrap your code in a form and add an action and it should work fine :-)
This might work. Untested
Remove the onblur event from the textarea and place it as on onclick on the input
onclick="document.getElementById('text1').style.height='36px'"
Revised fiddle: http://jsfiddle.net/jasongennaro/wmuYq/2/