Добавить функцию onClick в ListItem с помощью jQuery

0

Im динамически создает UniformList с динамическими ListItems, используя jQuery. Все элементы строятся и отображаются правильно (используя абсолютное позиционирование в CSS) на странице.

Изменение: Следующий код не из моего OP. Он был отредактирован для включения предложений, представленных в комментариях ниже.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <style>
            #container {
                position:relative;
                z-index:-1;
            }

            #myDisplay {
                position: absolute;
                top: 100px;
                left: 100px;
                width: 400px;
                height: 200px;
                background-color: grey;
                z-index:-1;
            }

            #position_1 {
                position: absolute;
                top: 50px;
                left: 100px;
                color: black;
                z-index:1;
            }

            #fieldList {
                // placeholder
            }
        </style>
        <script>
            function positionElement() {
                var list = $('<ul id="fieldList">');
                var firstItem = $('<li id="position_1">').text('test');

                // add item to list
                list.append(firstItem);
                list.append('</li>');
                // add more items...
                list.append('</ul>');

                // add list to div
                $('#myDisplay').append(list);

                // added classes to elements
                ('#fieldList').addClass('fieldList');
                ('#position_1').addClass('position_1');

                // add event listener to LIs
                $('ul.fieldList li').click(function(e) {
                    var $target = $(e.target);
                    if($target.is('li')) {
                        alert('test');
                    }
                }); 
            }

            $(document).ready(function() {
                positionElement();
            });
        </script>
    <head>
    <body>
        <div id="container" class="container">
            <div id="myDisplay" class="myDisplay"></div>
        </div>
    </body>
</html>
  • 0
    Пара не по теме заметок. 1) Почему бы не добавить .fieldList в HTML первого оператора? 2) Ваш $target var и ваш оператор if имеют смысла, учитывая селектор функции click.
  • 0
    @isherwood - нет гарантии, что event.target - это тот же элемент, связанный в селекторе, что это может быть вложенный элемент внутри LI
Показать ещё 1 комментарий
Теги:

3 ответа

0
Лучший ответ

Я думаю, что способ добавления элементов <ul> и <li> означает, что вы получаете пустые <ul> а затем <li> элементы добавляются прямо к #myDisplay ниже. Чтобы ваш поиск $('ul.fieldList li') все элементы, вам нужно <li> находиться внутри родительского элемента <ul>.

т.е. вы в конечном итоге

<div id="myDisplay">
    <ul id="fieldList" class="fieldList"></ul>
    <li id="position_1" class="position_1"></li>
</div>

Когда я предполагаю, что вы хотите,

<div id="myDisplay">
    <ul id="fieldList" class="fieldList">
        <li id="position_1" class="position_1"></li>
    </ul>
</div>

Возможно, что-то вроде этого для создания списка:

var list = $('<ul>');
var firstItem = $('<li>').text("foo").addClass("bar");
list.append(firstItem);
// append more items...    
$('#myDisplay').append(list);
Поделиться
  • 0
    Хороший улов - в том же духе ответ ниже. Я сделал это изменение, чтобы добавить ListItem (s) в UniformList. Однако onclick все еще не работает. После внесения этого изменения, я попробовал предложения по созданию функции щелчка ниже.
  • 0
    Прикрепляете ли вы прослушиватели событий после того, как список был создан? Запуск кода, когда дом был загружен? Вот скрипка, которая работает для меня (Chrome, OsX 10.9) jsfiddle.net/npHVf
Показать ещё 4 комментария
0

Ваш селектор в третьей строке ошибочен. + Изменить

$('#myDisplay').append('<li id="position_1"></li>');

в

$('#fieldList').append('<li id="position_1"></li>');
Поделиться
0

Попробуй это

$(document).on('click','ul.fieldList li',function(e) {
    var $target = $(e.target);
    if($target.is('li')) {
        alert('test');
    }
});

Элемент списка динамически генерируется.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню