JQuery Cannot bind click event on selectable

jquery selectable
jquery events
jquery bind
jquery on click not working
jquery mousedown event
jquery on multiple events
jquery ::before click event
jquery event handler

This should be very simple, but I am unavailable to retrieve click event and fire a function on a selectable item for JQuery UI.

<div id="a">
<ol id="selectable-a">
  <li class="a-item">1</li>
  <li class="a-item">2</li>
  <li class="a-item">3</li>
  <li class="a-item">4</li>
</ol>
</div>

Javascript:

$("#selectable-a").selectable();

$("li .a-item").click(function () {
  console.log("Executing command");
});

But the click event is never fired.

I have look into Google for that.

  • try to replace .click( by .bind('click', but it does not change anything
  • In the jquery forum they raise this problem and someone gives a solution tweaking the inner functionning, which does not work for me (content.data('selectable') is always undefined, no matter what)
  • Setting the distance to 1, meaning that the user needs to move a mouse by 1 pixel so that the event is fired, is a bad idea.
  • This SO question does not have any satisfactory answer. Namely, I don't just want to get the click event on a selected item, but on any item.

Any idea on how to solve the problem?

Use $("li.a-item") instead of $("li .a-item")

The first one looks for a li with the a-item class ; the second looks for an element with the a-item class inside a list element.

JQuery On Click Function not working after appending HTML, there at the time of page ready, the binding can't happen. Giving jQuery an array will combine each item into a bigger jQuery object, thus you can bind your events in one shot. Assume b1 and b2 is DOM element, not jQuery object. $([b1, b2]).click(function (evt) { // your code goes here });

This would work for:

<ol id="selectable-a">
  <li><div class="a-item">1</div></li>
</ol>

For yours, use:

$("li.a-item").click(function () {
  console.log("Executing command");
});

or even just

$(".a-item").click(function () {
  console.log("Executing command");
});

if you don't use .a-item elsewhere

Difference between mousedown and click in jquery, () fires, when you press mouse button and then release it. Maybe one of the new jquery versions supports the click event on options. It worked for me: $(document).on("click","select option",function() { console.log("nice to meet you, console ;-)"); }); UPDATE: A possible usecase could be the following: A user sends a html form and the values are inserted into a database. However one or more values are

If you use the following jQuery selector it works:

$("#selectable-a li").click(function () {
   console.log("Executing command");
});

This has the added benefit that you don't need an extra class for the list items anymore

Example: http://jsfiddle.net/9brPn/1/

How to Get the ID of an Element using jQuery, In some browsers you can't bind a mouseup, click, dblclick, etc. event to an element which is selectable. In others it works or you just have to  It will work because you attach it to every specific element. This is why you need - after adding your link to the DOM - to find a way to explicitly select your added element as a JQuery element in the DOM and bind the click event to it. The best way will probably be - as suggested - to bind it to a specific class via the live method.

Automatically, the selectable adds a helper div to display a lasso with the class .ui-selectable-helper. This helper div is positioned right under the mouse. My best guess is that it's created on a mousedown and then interferes with the clicking.

I am working on a better fix, but for now, I am using this:

.ui-selectable-helper{
  pointer-events:none;
}

Also, change your selector to : $("li.a-item") And NOT $("li .a-item")

[notice the space is not correct in your code]

[EDIT] Better fix : From http://api.jqueryui.com/selectable/#option-distance

Add the option distance into your initialization as $("#selectable-a").selectable({distance:10});

Selectable dosn't fire click event, Description: Bind an event handler to the "mousedown" JavaScript event, or trigger that We can also trigger the event when a different element is clicked:  Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Jobs Programming and related technical career opportunities

I have the same problem bro! I found the perfect solution:

My code was:

$( "#selectable" ).selectable();
$('li.slot').on('click', function() {
    var selected_date = $(this).attr('data');
    console.log('selected item: ' +  selected_date); // open the console to see the selected items after each click
    $('#appointment_start').val(selected_date);
});

And now is:

$( "#selectable" ).selectable({
    selected: function( event, ui ) {
        var selected_date = $(ui.selected).attr('data');
        console.log('selected item: ' +  selected_date); // open the console to see the selected items after each click
        $('#appointment_start').val(selected_date);
    }
});

For me it works perfectly :)

.mousedown(), A click event handler attached via that string could be removed with .off("click. cannot attach data, and therefore cannot have jQuery events bound to them. Stack Overflow | The World’s Largest Online Community for Developers

Attach an event handler function, This property is very useful in event delegation, when events bubble. Examples: Display the tag's name on click. 1. 2. 3. According to jQuery on() documentation: Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on() Our code above worked only for the first page elements because elements from other pages were not available in DOM at the time the code was executed. Solution

event.target, Event methods trigger or attach a function to an event handler for the selected elements. dblclick(), Attaches/Triggers the double click event select(), Attaches/Triggers the select event Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on(). Any string is legal for eventType; if the string is not the name of a native DOM event, then the handler is bound

jQuery Event Methods, Any events that you bind in your own code, including any Select2 events that you explicitly bind, will need to be unbound manually using the .off jQuery method: This method is a shortcut for .on( "select", handler ) in the first two variations, and .trigger( "select" ) in the third. The select event is sent to an element when the user makes a text selection inside it. This event is limited to <input type="text"> fields and <textarea> boxes. For example, consider the HTML:

Comments
  • This solution would work for mousedown but unfortunately neither for mouseup nor click.