Question

After dynamically creating an element with this:

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

Although this button does create a new LI element, I’m having a hard time controlling many of the elements inside once created. The “delete” button works – but only when using the live() function:

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

The ScrewDefaultButtons plug-in does not get called though. And the text boxes themselves do not behave the same as LI elements I manually write in for texting purposes. For example, the basic hover css replacement doesn’t work on the text fields. What am I missing? It has to do with binding – but all I can figure out is how to deal with any click functions (like the delete button). Everything else though doesn’t respond as “normal” elements already on the page.

UPDATE
Here is what I’ve added so that the mouseover, etc works:

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

This works great. Now all that is left is the checkbox image replacement. I’m sure this has more to do with the plugins syntax. How does one format the live() function with a non-standard call such as:

$('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 and bind assign an event to elements that already exist at the time of calling. live in constrast, also adds the event if an element matching the selector is added later. That’s why the button works when you use live.

An alternative would be to call click or bind after the element is created. That is a better solution in terms of performance, but the gain isn’t that big for small pages. Also, it’s a little more complex. You got to make sure you don’t add the event as well to elements that already have one, or they will actually be bound to two event handlers.

[edit]

The problem with the selectors '.chkBanner_' + uid and '.txtBannerName_' + uid, is that they are class selectors, while the elements only have an id. Either make 'chkBanner_' + uid a class of the element, or change the selector to '#chkBanner_' + uid.