jQuery代码在没有断点的情况下无法工作

Question

我有一个奇怪的问题。我正在使用jquery星级插件。如果我的 JS 代码中有断点，那么只有单选按钮会转换为星星，否则它不会转换。我将逐步解释代码此 jquery 代码将 ratingDialog.jsp 加载到 jquery 对话框中

function openRatingDialog() {
dialogId++;
var rateDialog = $('<div id="ratingloaderDiv"></div>')
.load("ratingDialog.jsp?id="+ dialogId).dialog({
    autoOpen: true,
    minHeight:275,
    width: 400,
    height: 350,  
    open: function( event, ui ) {
        var rating;
        console.log('first');
            $('.rateCls'+dialogId).rating({
             callback:function(value,link) {
                 rating = value;
             }
         });
            console.log('first');
        $("#showDialogMessage"+ dialogId).hide();
        $('#reviewArea'+ dialogId).val('');
        $('#source'+ dialogId).attr('checked', false);
        $('#destination'+ dialogId).attr('checked', false);
        $("#submit"+ dialogId).click(function(e) { 
             var index = sessionStorage.getItem("history_index");
             alert(index);
             alert('submit clicked');
             $("#showDialogMessage"+ dialogId).hide();
             var review = $("#reviewArea"+dialogId).val();
             var ratingDetails;
             if($('#source'+ dialogId).is(":checked")&& $('#destination'+ dialogId).is(":checked")) {
                 ratingDetails = "overallRating";
             }
             else if ($('#source'+ dialogId).is(":checked"))    
             {
               ratingDetails = $("#source"+ dialogId).val();
             }
             else if ($('#destination'+ dialogId).is(":checked"))
             {
               ratingDetails = $("#destination"+ dialogId).val();
             }
             else
             {
                 ratingDetails = "vendorRating";
             }
              var xmlhttp;
                 $("#submit"+ dialogId).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"+ dialogId).innerHTML=xmlhttp.responseText;
                            $("#showDialogMessage"+ dialogId).show();
                            $("#submit"+ dialogId).removeAttr('disabled');
                            if ($("#showDialogMessage+dialogId:contains('Thanks')").length > 0) {
                                $("#"+index).hide();
                                $("#msg"+index).show();  
                            }
                        }
                    }
                    xmlhttp.open("POST", url, true);
                    xmlhttp.send();
            }); 
         }
      });
   }
 $(document).ready(function() {
 $(".rate").on("click", function() {
     // Display the dialog
     var index = this.id;
     sessionStorage.setItem("history_index", index);
     console.log('first');
     openRatingDialog(); 
     console.log('first');
     });
});

这是评级对话框.jsp

<% String id = request.getParameter("id"); %>
<form id="rateDialog<%=id%>" class="rateDialog<%=id%>" style="height:250px;width:500px;" title="Rating">
<div id="showDialogMessage<%=id%>"></div>
<p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Rate your overall satisfaction:</label></p>
<div id="starVin<%=id%>" style="display:block;">
<input id="rateStars<%=id%>" type="radio" value="1" class="rateCls<%=id%>"/>
<input id="rateStars<%=id%>" type="radio" value="2" class="rateCls<%=id%>" />
<input id="rateStars<%=id%>" type="radio" value="3" class="rateCls<%=id%>"/>
<input id="rateStars<%=id%>" type="radio" value="4" class="rateCls<%=id%>"/>
<input id="rateStars<%=id%>" type="radio" value="5" class="rateCls<%=id%>"/>
</div>
<br/>
<p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Please provide your review: </label></p>
<textarea id="reviewArea<%=id%>" name="reviewArea" rows="5"></textarea>
<p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label><input type="checkbox" id="source<%=id%>" 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<%=id%>" value="destination" name="destination"> Rating specific to destination pincode</label></p>
<input id="submit<%=id%>" type="button" value="Submit" style="margin : 18px 0px 0px 93px;"/>

我正在对操作类进行 ajax 调用。请询问是否需要任何详细信息。

Answer 1

就像我在这里建议的那样，尝试将dialog调用放在load回调中，以确保它仅在获取 JSP 后触发。此外，请考虑将dialogId分配给局部变量，以避免在检索第一个对话之前请求第二个对话框时值不匹配。

var dialogId = 0;
var rateDialog;
function openRatingDialog() {
    var id = dialogId++;
    $('<div id="ratingloaderDiv"></div>').load("ratingDialog.jsp?id="+ id, function() {
        rateDialog = $(this).dialog({
            autoOpen: true,
            minHeight:275,
            width: 400,
            height: 350,  
            open: function( event, ui ) {
                $(".rateCls"+ id).rating();
                $("#showDialogMessage"+ id).hide();
                $('#reviewArea'+ id).val('');
                $('#source'+ id).attr('checked', false);
                $('#destination'+ id).attr('checked', false);
                $("#submit"+ id).click(function(e) {
                [...]
        });
    });
}