Fire onclick on <select> element but not on <option> - javascript

My element updates its options using the onclick() listener when clicked. The problem is the listener is firing when an option is clicked as well, so the user is unable to select anything in the updated list.
groupSelect.onclick = function() {
PopulateList();
}
I'd like to run my function only when the select element is clicked(when the menu has not dropped down yet) but not when a specific option is clicked. How can I do so? I'm writing the JS part using NodeJS.

Events will bubble up the hierarchy, so a click on an option will also trigger any events bound to its parent select.
This is fixed by stopping propagation of the event on your option listener
$('option').click(function(event){
event.stopPropagation();
//rest of code
})

Related

How to check a document.click inside a dropdown with elements dinamically created?

I'm using the code below on my content_script to get mouse target, however, it doesn't get the 'click' trigger on a dropdown with elements created at runtime.
By that I mean, I can see the target of everything, even the dropdown itself, just the elements created are not triggering the function.
$(window).on('click', function(event){
{
console.log(event.target);
}
good to mention mousemove works fine
document.onmousemove = function(e)
{
console.log(e.target);
}
my dropdown is basically a bunch of 'li' inside a 'ul' element, created from another js, displayed as a dropdown, does anyone have any ideas?
The event binding code must be executed when the element it binds to is already there. You need to use Event Delegation with.on() Same question answered here
example:
$(document).on('.select2-results__options .select2-results__option','selector', function(event){
console.log(event.target);
});

Angular2 toggle/open ng2-select dropdown

Angular 4.3+
I am using ng2-select dropdown.
I want the drop down to be opened on some event. I want to trigger the event that would open the drop down.
Dropdown:
<ng-select
[items]="list"
[(ngModel)]="modelName"
placeholder="Select">
</ng-select>
When the user clicks on the dropdown it gets focus and the list is being displayed. I would like this happen on some click event on the different button.
What I have tried so far:
this.el is ElementRef to the ng-select element. (Getting the element reference for ng-select correctly, it console log correct element that I am trying to trigger events.)
As it opens when the user clicks on it, I tried to trigger a click event on an element.
this.el.nativeElement.click();
Tried to trigger click event on .ui-select-toggle element.
this.el.nativeElement.querySelector('.ui-select-toggle').dispatchEvent(new Event('click'));
Similarly I tried to trigger focus event but didn't work.
Is there any other way that we can trigger some event on ng-select element that gets focus on ng-select and get the drop down open.
I wrap up the click event trigger code inside the setTimeOut function like below and it is working fine now.
setTimeout(() => {
this.el
.nativeElement
.querySelector('.ui-select-toggle')
.dispatchEvent(new Event('click'));
});
.ui-select-toggle is the element does dropdown toggle on click, so I figured if I trigger click event on that element it will toggle/open the drop-down.
So I tried the following(without the setTimeOut wrapper)
this.el
.nativeElement
.querySelector('.ui-select-toggle')
.dispatchEvent(new Event('click'));
And it did nothing. But when I wrap that code in setTimeOut it actually triggers the click event and I get expected functionality.
Here I am not sure why it functions like that but I believe this is something related to javascript.
If you are using multiple mode:
openNg2Select(ng2Select: SelectComponent) {
setTimeout(() => {
const ng2 = ng2Select.element.nativeElement.querySelector('.ui-select-search');
ng2.dispatchEvent(new Event('click'));
});
}
In HTML:
<ng-select #ng2Select [multiple]="true" [items]="items" (selected)="selected($event)"
(removed)="removed($event)" placeholder="Please Select"
[(ngModel)]="selectedItem">
</ng-select>
<button class="btn btn-pripary" (click)="openNg2Select(ng2Select)>Open ng2-select</button>

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");
});
}

Using on('change') how can I bind an event listener to elements created after the <script>'s have run?

I am using a cascading dropdown feature for my search page.
When the user selects a new element from the dropdown menu, a new dropdown menu should appear and so on.
I have another function to populate the dropdown menus so disregard the fact they have no elements.
$(".search-cascading-dropdown").on("change", function() {
$("#search-cascading-dropdown-container").append("<select class='search-cascading-dropdown'></select>");
});
Once the new select box has been added, there isn't an event listener attached. How can I get this working so eachtime the user selects an entry from the dropdown list it creates a new list?
Use jQuery's .on event delegation:
var $parent = $("#search-cascading-dropdown-container");
$parent.on("change", ".search-cascading-dropdown", function() {
$parent.append("<select class='search-cascading-dropdown'></select>");
});
Try something like this:
$(document).on("change",".search-cascading-dropdown",function() {
$("#search-cascading-dropdown-container").append("<select class='search-cascading-dropdown'></select>");
});
The on should be called on a parent of your .search-cascading-dropdown elements, and you should add the selector in the arguments of the "on" method :
$("#parent").on("change", ".search-cascading-dropdown", function(event){
...
});
That way, all change events occuring on descendants of #parent, filtered by the selector, will be handled by your event handler.
Source: http://api.jquery.com/on/#on-events-selector-data-handlereventObject
Hope that help.

Dynamically Created Check Box in Header of Jquery UI Accordion

I am creating an accordion from a DB with checkboxes in the headers. I have seen the solutions that solve the problem of clicking the checkbox without activating the accordion using the click() function, but since I am dynamically creating the accordion, the click() function will not work. I am at a loss as how to solve the problem of clicking a checkbox in a dynamically generated accordion header.
The problem is that the click event activates the accordion before the on('click') has a chance to run e.stopPropagation.
Any Ideas?
The problem is when you use event propagation to register the event handlers, it is normally attached to the body or some elements which is much higher up in the hierarchy. So by the time the events attached to accordion headers will be executed resulting in collapsing/expanding the tab.
Since you are creating the checkbox dynamically, the solution is to add the click event handler preventing propagation to the checkbox after it is created.
Ex:
var chk = $('<input />', { type: 'checkbox'});
chk.click(function(e){
e.stopPropagation();
});
chk.appendTo(accordionHeader)

Categories