how to dynamically add jquery mobile popup effect to links

Question

In jquery mobile, I dynamically add a tags that is supposed to open a popup like in this example below. But since it is dynamically added, the jquery mobile effects don't affect it. How can I get it to work like this?

Thanks

<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Actions...</a>
<div data-role="popup" id="popupMenu" data-theme="b">
        <ul data-role="listview" data-inset="true" style="min-width:210px;">
            <li data-role="list-divider">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Disable</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
</div>

Answer 1

When you append any html into a page after the page's initial load, you need to reapply any of the jquery functions in order for them to work when the event occurs

Example...

if you currently have something like this:

    <script type="text/javascript">
    $(document).ready(function () {
      $('a').on('click', function () {
            //something
            return false;
        });
    });
    </script>

This will do //something whenever the user clicks on any < a > link. Now that you are loading the new < a > links in after the document is ready, the code above will not apply to the new code as it was not on the page when the javascript applied the above code.

To fix this, you need to run the function that does the //something again after the new < a > has been loaded.

    <script type="text/javascript">
    $(document).ready(function () {

            somethingFunction();

        });
    });

    //this is where we put the code to apply an event, it is now recallable later on.
    function somethingFunction(){
    $('a').on('click', function () {
            //something
            return false;
        });
    }
    </script>

Assuming that you are pulling in the new < a > html via an ajax query, you would need to call the somethingFunction() after the ajax query is successful

EG

$.ajax({
type: "POST",
url: "/action" ,
dataType: 'text',
success: function(data){
    $('.popups').html(data);
    somethingFunction(); // THIS IS WHERE IT APPLIES THE EVENT TO YOUR NEW HTML.
}
});

Answer 2

If I understood correctly, you want to add buttons dinamically, resulting in the style proposed in your example:

class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a"

To apply jQuery Mobile enhancements after appending some HTML you have to call the widget creation method: .button(); in this case (can be .checkboxradio(); , .listview(); , etc).

I put toghether a JSFiddle which demonstrates dynamically creating a button calling .button() and also applying hardcoded classes (which I think it's not a good thing to do).

Answer 3

There is a demo available in jquery mobile documents Dynamically create popup

Following i write a simple html tags in javascript then append in to jquery mobile pages.

html:

 <div data-role="page">
    <div data-role="content" id="forpopup">
    </div>
<div>

Here is the Fiddle Demo .

i hope this will be helpful.