Controlling elements after dynamically creating them
<p>After dynamically creating an element with this:</p>

<pre><code>            $('#btnAddBanner').click(function () {
            var uid = new Date().getTime(),
            newBanner = '&lt;li class="ui-state-default bannerBlock"&gt;&lt;div class="beVisible"&gt;&lt;input type="checkbox" name="chkBanner_' + uid + '" id="chkBanner_' + uid + '" checked="checked" /&gt;&lt;/div&gt;&lt;div class="beDelete"&gt;&lt;img class="btnDelete" src="/images/btn_delete.png" alt="Delete Banner" /&gt;&lt;/div&gt;&lt;div class="beBanner"&gt;&lt;img src="/images/NewBannerTemplate.jpg" width="285" height="81" border="0" alt="" /&gt;&lt;/div&gt;&lt;div class="beName"&gt;&lt;input type="text" id="txtBannerName_' + uid + '" class="EditBox1" placeholder="Temp Text" value="(type banner name here)" /&gt;&lt;/div&gt;&lt;div class="beFileName"&gt;File Name: &lt;input type="text" id="FileName_' + uid + '" class="EditBox1 EditBoxAltText" style="width: 197px;" value="" /&gt;&lt;/div&gt;&lt;div class="beUpload"&gt;&lt;a href="#"&gt;&lt;img src="/images/icons/disk.png" alt="Upload" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="beStart"&gt;Start Date: &lt;input type="text" id="StartDate_' + uid + '" class="EditBox1 EditBoxAltText" style="width: 80px;" value="" /&gt;&lt;/div&gt;&lt;div class="beEnd"&gt;End Date: &lt;input type="text" id="EndDate_' + uid + '" class="EditBox1 EditBoxAltText" style="width: 80px;" value="" /&gt;&lt;/div&gt;&lt;/li&gt;';
            $('#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;
           });
</code></pre>

<p>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:</p>

<pre><code>        $('.btnDelete').live('click', function () {
            $(this).closest('li').remove();
        });
</code></pre>

<p>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.  </p>

<p><em>UPDATE</em>
Here is what I've added so that the mouseover, etc works:</p>

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

<p>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:</p>

<pre><code>$('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 });
</code></pre>

<p>?</p>
