Why jQuery ui selectable plugin is disabling my original bound click function

Question

i have problem with normal click when i attach jquery.ui-selectable to a row

jquery-ui-selectable is working fine as per desired but my attached click is not working

i have read somewhere to do

e.metaKey = false; //true i did both, but did not work

My code looks like this in jsfiddle

 $('#selectable').selectable({filter:'li'})

/* $('#selectable').bind("mousedown", function (e) {
           e.metaKey = true;
 }).selectable() */
 
 
 $('#selectable li').bind("click", function (e) {
    alert('clicked item : '+$(this).text());
});

Question: i want my attached click to work normally as we expect.

here is demo: http://jsfiddle.net/eabangalore/71xvp5ko/

I have similar code in my project where click is not working

Note: i want my answer to be working in jsfiddle, here in snippet it works don't know why, i my project it does not work

user_13669048 · Answer

If you want actual click function to then you need to add pointer-events:none to this class ui-selectable-helper so that click event is NOT bubbling up.

Live Demo:

$('#selectable').selectable({
  filter: 'li',
})

$("#selectable > li").on('click',function() {
  console.log($(this).text());
});

#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#selectable li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

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






  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6
  Item 7

You can simply use selected method of jQuery selectable plugin - there is no need to do additional bind or click functions to get the clicked item li text() as you wanted.

Live Working Demo:

$('#selectable').selectable({
  filter: 'li',
  selected: function(event, ui) {
    var selectedLi = $(ui.selected).text()
    console.log(selectedLi); //clicked li item text
  }
})

#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#selectable li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}





  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6
  Item 7

Why jQuery ui selectable plugin is disabling my original bound click function

1 Answers