Question

The issue: I have text fields that are extremely long, and I’m truncating them and putting the full text into a jQuery Mobile popup that will appear when the ‘[more]’ link is clicked. However, I’m having trouble finding the right hook to initialize the popup after replacing the text with the popup markup. I bound it to pageinit, but when I click, nothing happens. Not binding the replacement code at all gives me the message: “Function called on popup that has not been initialized”, so I know that some initialization is necessary – but if not at pageinit, I don’t know how early in the stack it needs to be called.

JSFiddle: http://jsfiddle.net/KSFyn/1/ – note: since the built-in jQuery Mobile for JSFiddle is 1.1.1, the pageinit isn’t performing as expected, but that gives you an idea of what I’m trying to accomplish.

Answer 1

Does something like this work?

• http://jsfiddle.net/RyNFc/1/

UPDATED: need to recreate the jQM Markup as you are dynamically adding the popup text after the page is created (using the ‘create’ event in JQM ~ beh)

• http://jsfiddle.net/RyNFc/4/

HTML

<div data-role="page" class="type-home">
    <div data-role="content">
        <a href="#popupInfo" data-rel="popup" data-role="button" data-inline="true">This is an exceptionally long span ...</a>
        <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;">
          <p>This is an exceptionally long span that I will attempt to break up with JS and present the full text as a popup.  This is an exceptionally long span that I will attempt to break up with JS and present the full text as a popup.</p>
        </div>
    </div>
</div>
​