Is there any way to detect click event

[ajit-soman]

There is a way to detect change event

$('#sample-select').change(function() {
  console.log(this.value);
});

But when i tried click event

$('#sample-select').click(function() {
  console.log(this.value);
});

It does not work . is there any way to detect click event ?

[sa-si-dev]

@ajit-soman code you have mentioned would work if this code is present after virtual select initialized.

VirtualSelect.init({
  ele: '#sample-select',
  ...
});

$('#sample-select').click(function () {
  console.log(this.value);
});

Alternatively, you could use the below code to add a listener before initialization.

$(document).on('click', '#sample-select', function () {
  console.log(this.value);
});

[ajit-soman]

I tried this

    $('#sample-select .vscomp-option').click(function () {
      console.log("clicked:", this);
    });
    

But it is not trigged every time

[sa-si-dev]

I tried this

    $('#sample-select .vscomp-option').click(function () {
      console.log("clicked:", this);
    });
    

But it is not trigged every time

@ajit-soman, .vscomp-option is a dynamic element. It would change when you scroll on options. So it won't work as you expect.

To add listeners for dynamic elements, we should use on syntax like below.

$(document).on('click', '#sample-select .vscomp-option', function () {
  console.log(this.closest('.vscomp-ele').value);
});

May I know, why you are using option click event instead of select dropdown change event?

[ajit-soman]

Thanks , Sure i will try

[ajit-soman]

I have an option custom in select box , in which i am opening a date range select calendar, Once user select custom option & select date range based on which data is filtered , Now user want to change date range, when user click on custom option again then change event is not triggered thats why i need to detect click . so that i can open date range calender again on option custom.

[ajit-soman]

Thanks , It works 👍

[yahyaerturan]

I have encountered the same problem.. somehow.. Original question was "Is there a way to detect change". Because it can be changed programmatically, not by a click event only, or by keyboard. And $("#myDropdown").on("change", .... is not working as it is changed inside the script. But I ended up a with a observing solution. Hope it helps.

Here is what I do:

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

function observeChange (element) {
    var observer;
    observer = new MutationObserver(function(mutations, observer) {
        if(mutations[0].attributeName === "value") {
            $(element).trigger("change");
        }
    });
    observer.observe(element, {
        attributes: true
    });
}

// Register to observe changes in this element...
observeChange($("#myDropdown")[0]);

// Now can detect change
$("#myDropdown").on("change", function (e) {
    console.log($(this).val());
});