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

这是 ratingDialog.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

就像我建议的here 一样，尝试将您的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) {
                [...]
        });
    });
}