0

我有一个 jquery 函数，我想将其转换为 .live，因为我想将 jquery 函数绑定到在我的网页上添加运行时的元素。

以下是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);
            });
    });

有人可以通过使此代码支持在网页上“实时”添加的元素来帮助我。

更新：我做了以下尝试但仍然没有按预期工作。

 <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');
    });


</
4

2 回答 2

2

您应该使用.on()并向下滚动到“直接和委托事件”部分。

请参阅这个SO 问题。

于 2012-05-04T15:17:22.580 回答
0

不要认为您应该使用live，可能取决于您的 jQuery 版本 -on建议使用 ，并且文档提供了合理的示例。但例如：

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

});
于 2012-05-04T15:17:45.403 回答