JS jQuery Hiding element on unfocus stops other events from being fired - javascript

I have a search suggestion box that I hide when the search text box loses focus. This works great, except that when I click one of the suggestions the click event for that suggestion does not fire.
searchText.focusout(function () { $("#search-suggestions").hide(); });
I also tried:
searchText.focusout(function () { $("#search-suggestions").css("visibility", "hidden"); });
I tried commenting out the hide on unfocus code and the click events then worked fine.
(Basically, the blur event happens before the click on the suggestion can be registered, such that the element I attempted to click is not on the screen when the clicm does register)
here's the click event code:
//Called after the ajax load
$("#search-suggestions").find("a").click(function () { alert("hi"); })
I also tried rendering this on the server but it failed as well:
Search Suggestion
If any one has any suggestions I would appreciate it. Thanks!

You could try to define something like this:
//this goes where you first binding focusout handler
searchText.focusout(onFocusOut);
//this is a usual function
function onFocusOut() {
$("#search-suggestions").hide();
}
//this could be defined after you draw the search-suggestions control
$("#search-suggestions").hover(function() {
//this is hover in handler; unbind focusout from searchText
//something like that:
$("#searchText").unbind('focusout', onFocusOut)
}, function() {
//this is hover out handler; bind focusout to searchText
//something like that:
$("#searchText").bind('focusout', onFocusOut)
});
you could also use live (http://api.jquery.com/live/) to define hover handler for #search-suggestions, depending on what exactly you need.
This will make your search suggestions stay visible when clicking them. In click handler you can then hide them.

Try just making it invisible.
Change $('#my_search_box').hide(); to $('#my_search_box').css('visibility','hidden');
If you have surrounding DOM elements that need to act as if the search box is gone, you can just assign it an absolute position as well.

Try using .css('visibility', 'hidden') instead of .hide which uses display:none.

Related

Bootstrap jquery long press with sortable?

I'm trying to add a long click to a sortable group of responsive bootstrap buttons. The only way the longclick function seems to trigger is if I put it on the #list_content container. However, then $this doesn't refer to the actual button div (.sm-col-4) that triggered the event.
$('#list_content').mayTriggerLongClicks().on('longClick', function() {
alert("long_click=" + JSON.stringify($(this)));
});
Hoping that someone has some ideas on how I can get the colid that triggered the event, and as well to prevent the long-press from triggering when the user is moving the button.
https://jsfiddle.net/7yhkp9eo/3/
Edit for answer #1.
Thanks for the response. Interesting, that works in the fiddle but not in my app. When I set the selector to:
$('#list_content')
I see the longClick event listener on the button as div#list_content.ui-sortable for both click and mousedown. When I set the selector to
$('a.btn')
there is no event listener for click or mousedown according to chrome developer tools. I also have this code in the main $(document).ready() section in my app.
$(document).on('mousedown', function (e) {
if($(e.target).hasClass('popover-content')) {
fp_popover_close = false;
} else
fp_popover_close = true;
});
Which I need to get a slider control in a popover to work properly. I see that event on the button with $('a.btn') but not the long click.
About the colid and the trigger of the event, in your fiddle this is working for me...
$('a.btn').mayTriggerLongClicks().on('longClick', function() {
var colId = $(this).parent('div').attr('colid');
alert(colId);
});
While I didn't solve this through the right selector at the sortable stage, I was able to add the long click event when the button was originally created by the application and then it only fires if sortable is active.

Dropdown option "change" not working if change event is unbound and then rebound

I'm facing this weird issue with off() and on() event binding to a select dropdown:
If I unbind and then rebind the change event to the select dropdown I won't be able to change the dropdown shown value. In other words, the selected value is not updated properly in the dropdown, even if the change event is triggered.
If I remove the off() part, leaving only the event bounding with on(), everything works fine but obviously I'm not able to prevent the binding of the same event more than once.
See a live example here http://jsfiddle.net/z7o11exs/
Test case:
use the dropdown (it works! the selected value is correctly show in the dropdown)
refresh page. click on the first button (off/on) and then use the dropdown. It does not work properly as the selected value does not change
refresh page. click on the second button (only on) and then use the dropdown. It does work as expected. side effect: clicking n times on the 2nd button bounds n times the change event to the dropdown element
Here's the code:
//--- This binds the event to the element
function bindEvent(){
$("#myselect").on("change", function(){
console.log("change");
});
}
//--- remove any change event previously added, then rebind it
function rebindEvent(){
$("#myselect").off("change").on("change", function(){
console.log("change");
});
}
Thanks in advance
Try to use namespacing:
//--- This binds the event to the element
function bindEvent(){
$("#myselect").on("change.something", function(){
console.log("change");
});
}
//--- remove any change event previously added, then rebind it
function rebindEvent(){
$("#myselect").off("change.something").on("change", function(){
console.log("change");
});
}
As #Karl said, using namespace is to:
Giving a name to your event allow you to identify that event. So when using .off, you can target a specific event to turn off.
You have to call .selectmenu("refresh") when you remove change binding. Because by default, change is attached to selectmenu as mentioned here. So if you remove it, you interrupt jQuery Mobile widget from "refreshing" to visually display the value.
See it working here.
function rebindEvent(){
$("#myselect").off("change").on("change", function(){
$(this).selectmenu("refresh");
});
}

Click event not always triggering

I'm using the bootstrap editor jquery plugin. I'm trying to set an event listener to the add hyperlink button, but it only gets triggered when the text input next to it is empty, otherwise it does not fire. Here's my jsfiddle. My code:
$('.dropdown-menu button').on('click', function () {
alert("ADD clicked");
});
To test the jsfiddle, simple select some text and press add without inputting a URL.
Then, select the text again, input a URL and press add, no alert() will be shown.
Any ideas why this is happening?
Something in this line is changing the behaviour for a reason I can't see right now:
$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
If you remove it, seems work, so, something in dropdown (i guess) is doing something wrong for you

Blur event not works for div

Here is my code below I'm trying to hide addstuff id div when clicked out of it. I tried body click event but it was useless. So I need a trigger event like blur. But It doesn't work for both blur and focusout events.
$(document).ready(function() {
$('#addstuff').blur(function () { $('#addstuff').fadeOut() })
})
There is no blur event for div. You can create that effect using the click event of body.Note that you should exclude that div from the click event
$(document).ready(function () {
$("body").not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});
});
Fiddle
Edit
As #TrueBlueAussie suggested, it would be better to use document instead of 'body' for the click event handler:
$(document).not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});
There's no way you can use .blur with a div, it has to be with some input field.
You can always use mouse events like
$(document).ready(function(){
$("#addstuff").mouseleave(function(){
$(this).remove();
});
});
http://jsfiddle.net/asrF2/
You can also use the HTML5 global attribute contenteditable (don't forget to set it true or false)
<div id="#addstuf" contenteditable="true">bla bla</div>
I don't recommend this that much, because of mobile browsers' compatibility.
divs have no focus and blur events, but you can add a contenteditable attribute so that you can type in that div, so the blur actually gets fired:
<div id="addstuff" contenteditable></div>
Then your jquery code works.
You can add additional functions to prevent people from actually typing in that div.
Alternatively you can use the .mouseleave() or .mouseout() event.
div element cannot be focused on so the blur function of jquery cannot be applied to it. See existing answers from our Stack Exchange buddies below for elements that focus can be applied on.
Which HTML elements can receive focus?

Question regarding jQuery click() function

$('document').ready(function(){
$('[name=mycheckbox]').live('click', function(){
if($(this).is(':checked'))
{
alert('it is checked');
}
else
{
alert('it is not checked');
}
});
$('[name=mycheckbox]').click();
});
If the checkbox is checked and you click it, the alert box says, "it is not checked", but when the page runs and the click event is fired (with the checkbox checked), the alert box says, "it is checked". Why? Is the state of the checkbox not effected by the click event? Is it mousedown that changes the state?
Instead of click you should use the change event here, like this:
$('[name=mycheckbox]').live('change', function(){
And invoke it with the same trigger, like this:
$('[name=mycheckbox]').change();
The click is separate from the change, if you want the event to fire when the check actually has finished changing, then you want change, not click. Alternately, if you want to toggle it from it's initial state still, do this:
$('[name=mycheckbox]').click().change();
Instead of the live event (which I've found to be buggy at best) try binding a normal click even instead. I've done something similar which works fine with a .click event not .live("click",
I hope that helps :S
What is happening is quite subtle.
I have a button and checkbox linked to the following code:
$("#chkbx").click(function() {
if ($(this).is(':checked')) {
alert('checked');
}
else {
alert('unchecked');
}
});
$("#MyButton").click(function() {
$("#chkbx").click();
});
When I click on the checkbox, everything is displayed as you would expect.
When I click on the button, the reverse is true.
What is happening, is that when you click on the checkbox, it is firing the default click event before executing your code, and thus you code is taking the status from the aftermath of the default click event.
When you call the click method directly on the element, it is actually calling your click function and then executing the default event.
I'm not why this should be. or if this is intentional, or a bug.

Categories