Question

用以下方法动态创建元素后：

            $('#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 });

Answer 1

click和bind在调用时为已存在的元素分配事件。 live处于约束状态，如果稍后添加与选择器匹配的元素，也会添加事件。这就是使用live时按钮工作的原因。

另一种方法是在创建元素后调用click或bind。就性能而言，这是一个更好的解决方案，但对于小页面来说，增益并不是那么大。而且，它有点复杂。您必须确保不将事件添加到已有元素的元素中，否则它们实际上将绑定到两个事件处理程序。

[编辑]

选择器'.chkBanner_' + uid和'.txtBannerName_' + uid的问题在于它们是类选择器，而元素只有一个id。将'chkBanner_' + uid作为元素的类，或将选择器更改为'#chkBanner_' + uid。

动态创建后控制元素

1 个答案: