[jQuery] inserted html recognized as DOM objects?

[jQuery] inserted html recognized as DOM objects?

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; "><DIV>Hi everyone,</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I hope someone can help me out with a problem that has been vexing me, but one that I think should be easy to solve for someone with even a little experience with js/jquery.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I have two DIVs, each with an ID. One has a link in it and the other doesn't.</DIV><DIV>When I click on the link, I'd like the link to be stripped away (so that there is only text) and the other DIV's text to be wrapped in a link instead. That's the easy part.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>The part that's causing me the problem is that I'd like that newly created link to have the same effect -- unlinking itself and re-linking the previous DIV's text.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I tried to use .html() to swap in the text or link in the respective DIVs, but I don't think that the "a" element is being registered in the DOM, so when that link is clicked, it just uses the default behavior rather than the jQuery behavior.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Anyway, is there a way to make sure that elements become part of the DOM when they're inserted? I tried using .text(), but that threw an error (besides, I was just grasping at straws at that point). Here is the code and markup (I also set up a test page at <A href="http://sandbox.englishrules.com"> http://sandbox.englishrules.com</A>):</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN> $(document).ready(function() {</DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>   $('#link a').click(function() {</DIV><DIV>       $('#link').html('no longer a link');</DIV><DIV>       $('#nolink').html('<a href="none">now this is a link</a>');</DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>     return false;</DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>   });</DIV><DIV>     $('#nolink a').click(function(){</DIV><DIV>       $(this).parent().html('no longer a link');</DIV><DIV>       $('#link').html('<a href="none">this is a link again!</a>');</DIV><DIV>       return false;</DIV><DIV>     });<SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN> });  //end document ready</DIV><DIV>/* -------------------------------------------------- */</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><div id="link"><a href="none">link</a></div></DIV><DIV><div id="nolink">no link</div></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Oh, and by the way, I'm using JQuery Rev. 164</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Any help would be much appreciated!</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Karl</DIV><DIV>___________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"></SPAN> </DIV><BR></BODY></HTML>_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/