Как использовать событие onclick в списке (выбирается jqueryui)?

Question

Как использовать событие onclick в списке (выбирается jqueryui)?

0

Я создал простой скрипт с выбранным jqueryui списком. Я генерирую селектируемый список и присваиваю каждому списку функцию onclick. Кажется, что событие onclick не было вызвано, когда я нажал на список. Любая идея решить эту проблему?

Благодаря,

мой сценарий:

$(document).ready(function() {
$("#myButton").button();
});

function generate(){
var $content=$("<ol id='selectable'>");
for (a=0;a<3;a++)
{
$content.append("<li class='ui-widget-content'  onclick='myFunction()'>item"+a+"</li>");
}
$content.append("</ol>");
$("#myList").append($content);
$('#selectable').selectable();
}

function myFunction()
{
alert("Hello World!");
}

мой стиль:

#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; }

мой html:

<div id='myList'/>
<button id="myButton" onClick="generate()">Generate List</button>

Alvinadi Wijaya 12 дек. 2013, в 18:20

Источник

Теги:

javascript

jquery

jquery-ui

jquery-ui-selectable

3 ответа

Ещё вопросы

Yaroslav Osetrov · Answer 1 · 2013-12-12T16-14-00.000Z

Вы должны использовать selecting события. См. Пример здесь http://jsfiddle.net/Pa4NK/

У меня есть другая проблема. На самом деле я хочу передать значение переменной 'a' из генерации списка в myFunction. Например, myFunction будет выглядеть следующим образом: function myFunction (msgNo) {alert (msgNo); } возможно ли это сделать?
Это правильный вариант. Например, у вас есть событие выбора и отмены выбора ( api.jqueryui.com/selectable )

Sterling Archer · Answer 2 · 2013-12-12T15-35-00.000Z

Поскольку элемент динамически создается, его необходимо делегировать. Вы можете сделать это в jQuery:

$(document).on("click",".ui-widget-content", myFunction());

(Или просто используйте анонимную функцию)

$(document).on("click",".ui-widget-content", function() {
    alert("Hello World!");
});

SaadK · Answer 3 · 2018-04-13T02-40-00.000Z

Выбираемый добавляет вспомогательный div для отображения лассо. Но вспомогательный div расположен под мышью, что не позволяет щелчку щелчка по базовому элементу. Несмотря на то, что ширина и высота помощников установлены на 0, это, по-видимому, вызывает проблемы.

Изменение параметра расстояния позволит решить проблему. Http://api.jqueryui.com/selectable/#option-distance

$( "#selectable" ).selectable({
 distance: 1
});

& Затем реализуйте то, что делает функция selectable()

    $('.ui-widget-content').on("click", function () {
        $('.ui-widget-content').removeClass('ui-selected');
        $(this).addClass('ui-selected');
    });