Converting a jQuery function to support runtime elements using() .live or .bind()

Question

i have a jquery function which i want to convert to .live because i want to bind the jquery function to elements adding runtime on my webpage.

Following is the jquery

        $(document).ready(function(){
          $('form.ratedStars').each(function(){

                    var sid=$(this).attr('id');

                    $("#"+sid).children().not("select, #rating_title").hide();

                    // Create caption element
                    //alert($(this).attr('id'));
                    var $caption = $('<div id="caption"/>');
                    var $message = $('<div id="messages"/>');

                    $("#"+sid).stars("selectID", 4);
                    // Create stars
                    $("#"+sid).stars({
                        inputType: "select",
                        //split: 2,
                        oneVoteOnly: true,
                        captionEl: $caption,
                        //cancelShow: true,
                        callback: function(ui, type, value)
                        {
                            // Display message to the user at the begining of request
                            $message.text("Saving...").fadeIn(30);

                            // Send request to the server using POST method
                            /* NOTE: 
                                The same PHP script is used for the FORM submission when Javascript is not available.
                                The only difference in script execution is the returned value. 
                                For AJAX call we expect an JSON object to be returned. 
                                The JSON object contains additional data we can use to update other elements on the page.
                                To distinguish the AJAX request in PHP script, check if the $_SERVER['HTTP_X_REQUESTED_WITH'] header variable is set.
                                (see: demo4.php)
                            */ 
                            $.post("demo41.php", {rate: value}, function(json)
                            {
                                // Change widget's title
                                ///$("#"+sid).next().text("Average rating");
                                alert(json.id);
                                // Select stars from "Average rating" control to match the returned average rating value
                                ui.select(json.id+'_'+Math.round(json.avg));
                                //ui.selectId(4);

                                // Update widget's caption
                                $caption.text(" (" + json.votes + " votes; " + json.avg + ")");

                                // Display confirmation message to the user
                                $message.text("Rating saved (" + value + "). Thanks!").stop().css("opacity", 1).fadeIn(30);

                                // Hide confirmation message after 2 sec...
                                setTimeout(function(){
                                    $message.fadeOut(1000)
                                }, 2000);

                            }, "json");
                        }
                    });

                    // Since the <option value="3"> was selected by default, we must remove this selection from Stars.
                    //$("#"+sid).stars("selectID", -1);

                    // Append caption element !after! the Stars
                    $caption.appendTo("#"+sid);

                    // Create element to use for confirmation messages
                    $message.appendTo("#"+sid);
            });
    });

Can someone help me by making this code support for elements added 'live' on webpage.

UPDATE: I did the following an tried but still doesnt work as expected.

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

          $('body').on('loadRatings',function(){
          $('form.ratedStars').each(function(){

                    var sid=$(this).attr('id');

                    $("#"+sid).children().not("select, #rating_title").hide();

                    // Create caption element
                    //alert($(this).attr('id'));
                    var $caption = $('<div id="caption"/>');
                    var $message = $('<div id="messages"/>');

                    $("#"+sid).stars("selectID", 4);
                    // Create stars
                    $("#"+sid).stars({
                        inputType: "select",
                        //split: 2,
                        oneVoteOnly: true,
                        captionEl: $caption,
                        //cancelShow: true,
                        callback: function(ui, type, value)
                        {
                            // Display message to the user at the begining of request
                            $message.text("Saving...").fadeIn(30);

                            // Send request to the server using POST method
                            /* NOTE: 
                                The same PHP script is used for the FORM submission when Javascript is not available.
                                The only difference in script execution is the returned value. 
                                For AJAX call we expect an JSON object to be returned. 
                                The JSON object contains additional data we can use to update other elements on the page.
                                To distinguish the AJAX request in PHP script, check if the $_SERVER['HTTP_X_REQUESTED_WITH'] header variable is set.
                                (see: demo4.php)
                            */ 
                            $.post("demo41.php", {rate: value}, function(json)
                            {
                                // Change widget's title
                                ///$("#"+sid).next().text("Average rating");
                                alert(json.id);
                                // Select stars from "Average rating" control to match the returned average rating value
                                ui.select(json.id+'_'+Math.round(json.avg));
                                //ui.selectId(4);

                                // Update widget's caption
                                $caption.text(" (" + json.votes + " votes; " + json.avg + ")");

                                // Display confirmation message to the user
                                $message.text("Rating saved (" + value + "). Thanks!").stop().css("opacity", 1).fadeIn(30);

                                // Hide confirmation message after 2 sec...
                                setTimeout(function(){
                                    $message.fadeOut(1000)
                                }, 2000);

                            }, "json");
                        }
                    });

                    // Since the <option value="3"> was selected by default, we must remove this selection from Stars.
                    //$("#"+sid).stars("selectID", -1);

                    // Append caption element !after! the Stars
                    $caption.appendTo("#"+sid);

                    // Create element to use for confirmation messages
                    $message.appendTo("#"+sid);
            });

            });

            $('body').trigger('loadRatings');
    });


</

[What have you tried?](http://mattgemmell.com/2008/12/08/what-have-you-tried/) — Tejs, May 04 '12 at 15:15
I thought of using .live and .bind but i cudnt find example showing their usage without binding them to events (like click,change etc) — Sunny D'Souza, May 04 '12 at 15:21

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

You should use .on() and scroll down to the section "Direct and delegated events".

See this SO question.

edited May 23 '17 at 12:04

Community

1
1

answered May 04 '12 at 15:17

Barry Kaye

7,682
6
42
64

score 0 · Answer 2 · answered May 04 '12 at 15:17

0

Don't think you should use live, probably depending on your version of jQuery - instead use of on is recommended, and the documentation gives reasonable examples of this. But for instance:

$("#" + id).on("click", function(e) {

});

answered May 04 '12 at 15:17

Grant Thomas

44,454
10
85
129

but i dont have any event to bind to eg:click,change etc.... then how do i use it? – Sunny D'Souza May 04 '12 at 15:20

Converting a jQuery function to support runtime elements using() .live or .bind()

2 Answers2