[jQuery] Cannot get inserted js to work with .live function...
<div>Hi, all...</div>
<div> </div>
<div>I'm inserting js and html into the dom and trying to use .live() to make it active, but I can't figure</div>
<div>out where to use .live() to cause the js to become after after insertion. I've noted in part 1 the only</div>
<div>place I could see to try the .live() function, but it didn't work.</div>
<div> </div>
<div>Any other suggestions about where I can try the .live() function in the code below, or perhaps</div>
<div>another approach to make this work? (To complicate matters, this code is inside a modal window</div>
<div>with no <script> links on the page...they <script> links that control the js code on this page are</div>
<div>in the parent window page. When I do try to add <script> links to this page, all js on this page stops working.)</div>
<div> </div>
<div>Sorry this is so long and complicated, but I couldn't see how to ask the question without providing</div>
<div>sufficient code.</div>
<div> </div>
<div>Thoughts and suggestions?</div>
<div> </div>
<div>Thanks,</div>
<div> </div>
<div>Rick</div>
<div> </div>
<div>The series of js code parts are: (edited for brevity)</div>
<div> </div>
<div>Part 0: (Example validation routine, not working in inserted code of Part 3.</div>
<div>If .live() function is added here, the code doesn't work in non-inserted dom code)</div>
<div>----------------------------------------------------------------------------------------------------------</div>
<div>$(document).ready(function() {</div>
<div> </div>
<div> $('textarea#specialDescriptionID').blur(function() {</div>
<div> </div>
<div> if ( this.value.length == 0 )</div>
<div> { '#specialDescriptionErrorID').fadeIn(500) }</div>
<div> else { $('#specialDescriptionErrorID').fadeOut(500) };</div>
<div> </div>
<div> });</div>
<div>});</div>
<div> </div>
<div>Part 1:</div>
<div>--------------------------------------</div>
<div>$(document).ready(function() {</div>
<div> </div>
<div> $('#editButtonID').click(function() { //<!--- I tried using .live here, but it didn't have any effect</div>
<div> </div>
<div> var specialID = $('.initialLastInsertedID').attr('id');</div>
<div> $('#previewSpecial').hide();</div>
<div> getInsertedSpecialForEdit(specialID);</div>
<div> </div>
<div> });</div>
<div>});</div>
<div> </div>
<div>Part 2: (called from Part 1 code)</div>
<div>-------------------------------------</div>
<div>function getInsertedSpecialForEdit(specialID) {</div>
<div> </div>
<div> var values = { dsn: '<cfoutput>#application.dsn#</cfoutput>',</div>
<div> specialID: specialID };</div>
<div> </div>
<div> $.ajax ({ cache: false,</div>
<div> type: "post",</div>
<div> url: "../components/specialProcessor.cfc?method=mGetInsertedSpecialForEdit&returnformat=json",</div>
<div> dataType: "json",</div>
<div> data: values,</div>
<div> success: function(response) {</div>
<div> </div>
<div> if ( response.MESSAGE == "Success" )</div>
<div> { buildSpecialForm(response); }</div>
<div> </div>
<div> else ( $('#unsuccessful').empty().append(response.MESSAGE).fadeIn(500); };</div>
<div> </div>
<div> }</div>
<div> });</div>
<div>)</div>
<div> </div>
<div> </div>
<div>Part 3: (called from Part 2, success section)</div>
<div>(The js that isn't working is in the form part below and is used for validation. The</div>
<div>validation script parts have had .live applied to them without effect</div>
<div>----------------------------------------------------------------</div>
<div>function buildSpecialForm(response) {</div>
<div> </div>
<div> $('#editInsertedSpecialDivID').empty();</div>
<div> </div>
<div> var out = [];</div>
<div> </div>
<div> out.push(',b>Edit Your Entry</b>
');</div>
<div> </div>
<div> out.push('<ul style="margin-left:30px;">');</div>
<div> out.push('<li>Edit your entry infomration below</li>');</div>
<div> out.push('<li>To cancel your entry...</li>');</div>
<div> out.push('</ul>');</div>
<div> </div>
<div> var out = [];</div>
<div> </div>
<div> $.each(response.QGETINSERTEDSPECIAL.DATA, function(i, row) {</div>
<div> </div>
<div> out.push('<form id="addSpecialEditFormID">');</div>
<div> </div>
<div> out.push('<p id="specialDescriptionEditErrorID" class="error">Please enter a description of the special');</div>
<div> //---> (The html above is used for validation on the page and works for other implementations, but for this inserted code, it doesn't respond to to manipulation)</div>
<div> </div>
<div> (other form content here)</div>
<div> </div>
<div> out.push('</form>');</div>
<div> </div>
<div> });</div>
<div> </div>
<div> $('#editInsertedSpecialDivID').html(out.join(''));</div>
<div> $(#editInsertedSpecialDivID:hidden').fadeIn(500);</div>
<div> </div>
<div>}<br clear="all"></div>
<div></div>