What I want to do is the following:
I have an <input> element and onclick of that input, I toggle a certain <div> (please see below)
<div>
<table>
<tr>...</tr>
...
...
</table>
</div>
When I click a row on the table above, I want to trigger an event (ex. put a certain value to <input> above and then hide the whole <div>. I have made it to work this far.
Issue: When the div is shown but NO <tr> was clicked (ex. the background is clicked), I want to hide the <div> this time also. So I put onblur event for the <input> and hides the div when this happens. This works.
Problem: BUT now, when I properly select a <tr>, the onblur is triggered FIRST, so the div and table gets hidden and no tr onclick is triggered. :(
My Solution so far: I removed the onblur event and made something like
$(document).mousedown(function() {
If event.target == myDiv
dont hide div, so onclick is triggered (manully hide later anyway)
else //background is clicked
hide div yey
});
Question: Is this a decent workaround? Or is there a better way? I want to know how jQuery UI implements this since I saw that datepicker is also a div. Sorry but my level of jQuery still does not allow me to properly read their implementation :/ If someone is kind enough to explain to me. Thank you.
Do something like
someTimeout = setTimeout(function(){ someFunction(); }, someDuration)
$("#someID").click(function() {
clearTimeout(someTimeout );
});
Related
I have an input field inside a div:
<div id="fields">
<input class="letters" type="text" name="lettersField" value="" />
</div>
and some jquery for it
$("#fields").on("change paste keyup focus", ".letters", function(){
// A new div is created with some p elements inside it like so
$("body").append('<div id="suggestions"></div>');
$("#suggestions").html("<p>words</p>");
});
Then finally i want to call a click event on those "p" elements like so:
$("body").on("click", "p", function(){
console.log("p element clicked");
});
The problem i am facing is that i need to click the "p" element TWICE for the FIRST time that the console.log appears, then when the input loses focus, i can click the "p" element and for each click have a console.log appear. Also, if i first click the input field, then click another input field or something else, and then go back to clicking the "p" element, it then logs the click on the first click (that's why i think that the input losing focus has something to do with the double click required).
I am not only interested in a specific solution to my problem, but also possibly a general understanding of what is happening here, if anyone could be bothered that would be awesome. Thanks in advance!!!
UPDATE FROM MY COMMENT
Hello again, i now noticed something, after running your codepen
again, give focus to the input field, then type "asd" on it, and THEN
try to click on the "p" element, that should reproduce the problem.
ANOTHER UPDATE FROM MY COMMENT
Hello once again, i managed to solve my problem by removing the
"change" event and leaving the rest events in tact (i had originally
also added a flag variable to create the window only once). Thanks
again for the help, if someone knows any more information on why the
"change" event would do that i would welcome it.
I am creating a suggestion box below a search box. I want it so that when the user has focus in the search box, and then clicks on one of the suggestions, it triggers an action. I have tried using jquery's on:
$(".searchbox + div").on("click", "a", function() {
$(".searchbox").val($(this).html());
});
My HTML structure is like this:
<input type="search" placeholder="Search" class="searchbox">
<div></div>
The links are dynamically inserted inside the div that follows the input.
The links do not have an href value, so they are not really links, I just want them to act like links.
When I click on one of the links, the searchbox loses focus, and, because of the css I have, the links get visibility:hidden. I think the searchbox loses focus before the link action is triggered, so it never is triggered. How could I get around this?
You can see it here.
Clarification: What I think is happening:
User clicks on link
Computer thinks, The user just clicked outside of the search box
Search box becomes blurred
CSS sees that search box is blurred, styles say to now make the suggestions visibility:hidden
Now the links are no longer clickable, so the event is never triggered.
Somewhere in your code you have a click handler that brings the search bar to the top and the rest of the UI into view. It executes when the user clicks anywhere that's not the search bar. You should add a statement that checks if the clicked element was an <a> element in the suggestion box.
So if this is the click handler. Also i think it's time to add an id to your suggestion div.
$(document).click(function(e){
var $clicked = $(e.target);
if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
$(".searchbox").val($(this).html());
else if(click was outside searchbar)
//move searchbar up and show UI
else
//click happened inside searchbar, do nothing.
})
I'm not sure why nobody understands your question, or why this question is being downvoted. It's a perfectly valid question.
EDIT:
I suggest wrapping the input and suggestion div with another div. Give this wrapper an attribute of tabindex="-1" so it can receive blur/focus events.
<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>
Then change your $(".searchbox").on("blur") to $("#wrapper").on("blur")
This way you can click anywhere in the suggestion box without the blur firing.
Alternatively, the mousedown event fires before the blur event. So try this maybe
$(".searchbox + div").on("mousedown", "a", function() {
$(".searchbox").val($(this).html());
});
You can use some plugins for that. Its too easy. For example if you work with any front framework like bootstrap, you can use typeahead.js plugin
I have a table with data, and when I click on a cell in a certain column, I want it to change into a select dropdown for the user to choose a category for that row (which will be written to the database by AJAX but that'll come later).
I've done something similar before with text boxes using this, which works great, but I'm not sure if I'm modifying it correctly.
I've created a JSFiddle which shows the problem I'm having. I click on the text and it turns into a select element as expected, but when I click on that to choose an option, the dropdown doesn't stay open and I can't select anything. Debugging has shown me that when I click the dropdown, it runs the $("td.ChooseType").click() routine again so I've tried to suppress that by removing the class then adding it back on on selection, but that hasn't solved it. On the rare occasion that the dropdown stays open, I am unable to select anything by either mouse or keyboard.
All of the users will be on IE8 unfortunately, so I need it to be compatible with that.
Thanks!
You need to use event delegation, as otherwise that click event is always bound to that td - regardless of whether its class changes.
Simply change:
$("td.ChooseType").click(function() {
To:
$("table").on('click', '.ChooseType', function () {
JSFiddle demo.
Purely as an alternative to the accepted answer, you can remove an attached handler with unbind. So instead of adding and removing the class, you could unbind and rebind your handler. Only requirement is that the function can't be in-line, but has to be declared separately.
example: http://jsbin.com/qiqunici/1/edit
var handler = function () {
$(this).unbind('click', handler); //unbind the clicked element only
//create and change the element
//inside the select-change event, instead of addClass, re-attach:
{
//$(this).parent().addClass("ChooseType").text(selected).find('select').remove();
$(this).parent().click(handler).text(selected).find('select').remove();
}
};
$("td.ChooseType").click(handler);
I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?
Please have a look at this fiddle: http://jsfiddle.net/mrmartineau/53fkV/embedded/result/
The intended outcome is that when a .poll_option td is clicked, the background colour changes to pink & the checkbox is checked. Each option has different bugs, these are:
Option 1:
The problem I have is that on Option 1, when I click the checkbox itself, it does not check but everything else works fine. By that I mean that when I click the label & the <td> the outcome is correct. It seems that the event is not bubbling correctly..
Option 2:
For this one, I tried another solution (removed the .toggle() method) and tried to figure out what element is actually being clicked (console.log(e.target.nodeName);) and now I can click the checkbox but not the label, rather the label does not make the event work.
Could you please have a look at my code & see where I'm going wrong because I'm sure it can't be this hard...
Cheers
Proposed simpler solution:
$('.poll_option.one td').click(function (e) {
$(this).toggleClass('highlight');
$(this).find('input').prop("checked", $(this).hasClass("highlight"));
console.log(e.target.nodeName);
// weird that clicking the label does not naturally propagate
// the click event to the parent
}).find("label").click(function () {
$(this).closest("td").click();
});
​Demo.