Блог

После динамического создания элемента с этим:

             $('#btnAddBanner').click(function () {
            var uid = new Date().getTime(),
            newBanner = '<li class="ui-state-default bannerBlock"><div class="beVisible"><input type="checkbox" name="chkBanner_'   uid   '" id="chkBanner_'   uid   '" checked="checked" /></div><div class="beDelete"><img class="btnDelete" src="/images/btn_delete.png" alt="Delete Banner" /></div><div class="beBanner"><img src="/images/NewBannerTemplate.jpg" width="285" height="81" border="0" alt="" /></div><div class="beName"><input type="text" id="txtBannerName_'   uid   '" class="EditBox1" placeholder="Temp Text" value="(type banner name here)" /></div><div class="beFileName">File Name: <input type="text" id="FileName_'   uid   '" class="EditBox1 EditBoxAltText" style="width: 197px;" value="" /></div><div class="beUpload"><a href="#"><img src="/images/icons/disk.png" alt="Upload" /></a></div><div class="beStart">Start Date: <input type="text" id="StartDate_'   uid   '" class="EditBox1 EditBoxAltText" style="width: 80px;" value="" /></div><div class="beEnd">End Date: <input type="text" id="EndDate_'   uid   '" class="EditBox1 EditBoxAltText" style="width: 80px;" value="" /></div></li>';
            $('#sortable').append(newBanner);
            $('.chkBanner_'   uid).screwDefaultButtons({ checked: 'url(images/btn_light_on.png)', unchecked: 'url(images/btn_light_off.png)', disabled: 'url(images/btn_light_off_dim.png)', disabledChecked: 'url(images/btn_light_on_dim.png)', width: 33, height: 35 });
            $('.txtBannerName_'   uid).val("(type new name here)");
            return false;
           });
 

Хотя эта кнопка создает новый элемент LI, мне трудно контролировать многие элементы внутри после их создания. Кнопка «удалить» работает, но только при использовании функции live():

         $('.btnDelete').live('click', function () {
            $(this).closest('li').remove();
        });
 

Однако подключаемый модуль ScrewDefaultButtons не вызывается. И сами текстовые поля ведут себя не так, как элементы LI, которые я вручную записываю для текстовых сообщений. Например, базовая замена css при наведении курсора не работает с текстовыми полями. Чего мне не хватает? Это связано с привязкой, но все, что я могу понять, это как обращаться с любыми функциями щелчка (например, с кнопкой удаления). Однако все остальное не реагирует как «обычные» элементы, уже находящиеся на странице.

ОБНОВЛЕНИЕ Вот что я добавил, чтобы наведение курсора мыши и т. Д. Работало:

             $(".EditBox1").live("mouseover mouseout focus blur", function (event) {
            if (event.type == "mouseover") {
                $(this).addClass('EditBoxHighlight');
            } else if (event.type == "mouseout") {
                $(this).removeClass('EditBoxHighlight');
            } else if (event.type == "focusin") {
                $(this).addClass('EditBoxSelect');
            } else {
                $(this).removeClass('EditBoxSelect');
            }
        });
 

Это отлично работает. Теперь все, что осталось, это замена изображения флажка. Я уверен, что это больше связано с синтаксисом плагинов. Как отформатировать функцию live() с помощью нестандартного вызова, такого как:

 $('input:checkbox').screwDefaultButtons({ checked: 'url(images/btn_light_on.png)', unchecked: 'url(images/btn_light_off.png)', disabled: 'url(images/btn_light_off_dim.png)', disabledChecked: 'url(images/btn_light_on_dim.png)', width: 33, height: 35 });
 

?

click и bind назначьте событие элементам, которые уже существуют на момент вызова. live в constrast также добавляется событие, если элемент, соответствующий селектору, будет добавлен позже. Вот почему кнопка работает, когда вы ее используете live .

Альтернативой может быть вызов click or bind после создания элемента. Это лучшее решение с точки зрения производительности, но выигрыш не так велик для небольших страниц. Кроме того, это немного сложнее. Вы должны убедиться, что вы не добавляете событие также и к элементам, у которых оно уже есть, иначе они будут фактически привязаны к двум обработчикам событий.

[править / править код]

Проблема с селекторами '.chkBanner_' uid и '.txtBannerName_' uid заключается в том, что они являются селекторами классов, в то время как элементы имеют только идентификатор. Либо создайте 'chkBanner_' uid класс элемента, либо измените селектор на '#chkBanner_' uid .