javascript - 没有断点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;"/>

我正在对 Action 类进行 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) {
                [...]
        });
    });
}