javascript – 如何使文档准备好多次执行

我正在使用jquery加载一个jsp.我有多个按钮.点击后,我正在进行一个jquery调用,在对话框中加载一个jsp.我希望每次加载jquery对话框中的jsp时都执行document ready函数.
分步说明：

这是jquery函数,它在每次单击速率时在对话框中加载ratingDialog.jsp.

function openRatingDialog() {
 var rateDialog = $('<div id="ratingloaderDiv"></div>')
 .load("ratingDialog.jsp").dialog({
     autoOpen: true,
     minHeight:275,
        width: 400,
        height: 350,  
     open: function( event, ui ) {
         $("#showDialogMessage").hide();
         $('#reviewArea').val('');
         $('#source').attr('checked', false);
         $('#destination').attr('checked', false);
         function openRatingDialog() {
 var rateDialog = $('<div id="ratingloaderDiv"></div>')
 .load("ratingDialog.jsp").dialog({
     autoOpen: true,
     minHeight:275,
        width: 400,
        height: 350,  
     open: function( event, ui ) {
         $(".rateCls").rating();
         $("#showDialogMessage").hide();
         $('#reviewArea').val('');
         $('#source').attr('checked', false);
         $('#destination').attr('checked', false);
         $("#submit").click(function(e) {
             $("#showDialogMessage").hide();
             var index = sessionStorage.getItem("history_index");
             alert(index);
             alert('submit clicked');
             alert(this.id);
             var rating = jQuery('#starVin .star:checked').val();
             var review = $("#reviewArea").val();
             var ratingDetails;
             if($('#source').is(":checked")&&   $('#destination').is(":checked")) {
                 ratingDetails = "overallRating";
             }
             else if ($('#source').is(":checked"))  
             {
               ratingDetails = $("#source").val();
             }
             else if ($('#destination').is(":checked"))
             {
               ratingDetails = $("#destination").val();
             }
             else
             {
                 ratingDetails = "vendorRating";
             }
              var xmlhttp;
                 $("#submit").prop('disabled',true);
                    var url="rate?index="+index+"&rating="+rating+"&review="+review+"&ratingDetails="+ratingDetails;
                    if (window.XMLHttpRequest)
                    {
                        xmlhttp=new XMLHttpRequest();
                    }
                    else
                    {
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange=function()
                    {

                        if (xmlhttp.readyState==4 && xmlhttp.status==200)
                        {
                            document.getElementById("showDialogMessage").innerHTML=xmlhttp.responseText;
                            $("#showDialogMessage").show();
                            $("#submit").removeAttr('disabled');
                            if ($("#showDialogMessage:contains('Thanks')").length > 0) {
                                $("#"+index).hide();
                                $("#msg"+index).show();  
                            }
                        }
                    }

                    xmlhttp.open("POST", url, true);
                    xmlhttp.send();
            }); 

          }
      });
     } 
           }
       });
    }
    $(document).ready(function() {
     var index ;
    $(".rate").on("click", function() {
     // Display the dialog
     openRatingDialog(); 
     index = this.id;
     });

这是ratingDialog.jsp

<link rel="stylesheet" href="dist/jquery.rating.css">
<div id="rateDialog" class="rateDialog" style="height:250px;width:500px;" title="Rating">
        <div id="showDialogMessage"></div>
        <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Rate your overall satisfaction:</label></p>
        <div id="starVin" style="display:block;">
         <input id="rateStar" type="radio" name="rating" value="1" class="rateCls star"/>
        <input id="rateStar" type="radio" name="rating" value="2" class="rateCls star" />
        <input id="rateStar" type="radio" name="rating" value="3" class="rateCls star"/>
        <input id="rateStar" type="radio" name="rating" value="4" class="rateCls star"/>
        <input id="rateStar" type="radio" name="rating" value="5" class="rateCls star"/>
        </div>
        <br/>
        <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Please provide your review: </label></p>
        <textarea id="reviewArea" name="reviewArea" rows="5"></textarea>
       <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label><input type="checkbox" id="source" value="source" name="source"> Rating specific to source pincode</label></p>
        <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label><input type="checkbox" id="destination" value="destination" name="destination"> Rating specific to destination pincode</label></p>
        <input id="submit" type="submit" value="Submit" style="margin : 18px 0px 0px 93px;"/>
</div>
<script src = "js/jquery.rating.js"></script>
</script>

每次ratingDialog加载我都希望它的document.ready函数被执行.在我的情况下,它只执行一次(第一次在对话框内加载)

解决方法:

如何将文档就绪代码移动到对话框回调？

var rateDialog;
$('<div id="ratingloaderDiv"></div>')
    .load("ratingDialog.jsp", function() {
        rateDialog = $(this).dialog({
            autoOpen: true,
            minHeight:275,
            width: 400,
            height: 350,  
            open: function( event, ui ) {
                $("#showDialogMessage").hide();
                $('#reviewArea').val('');
                $('#source').attr('checked', false);
                $('#destination').attr('checked', false);

                // Document ready
                $(".rateStar").show();
                $(".rateCls").rating();
                alert('hi'); 
            }
        });
    });

将对话框调用移动到加载回调还可确保在检索文件之前它不会运行.

标签：jquery,javascript,jsp,document-ready
来源： https://codeday.me/bug/20190623/1274809.html