0

Webページにランタイムを追加する要素に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);
            });
    });

Webページに「ライブ」で追加された要素をこのコードでサポートすることで、誰かが私を助けてくれますか?

更新: 次のことを試してみましたが、期待どおりに動作しません。

 <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 に答える