jquery code not working without breakpoint

问题

I have a weird issue. I am using jquery star rating plugin. If i have breakpoint in my JS code then only the radio buttons are converting into stars otherwise it is not converting. I will explain the code step wise This jquery code loads ratingDialog.jsp into jquery dialog box

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

this is 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;"/>

I am making ajax call to the action class. Please ask if any detail is required.

回答1:

Like I suggested here, try placing your dialog call within your load callback to ensure it only fires after the JSP has been fetched. Also, consider assigning your dialogId to a local variable to avoid mismatched values in case a second dialog is requested before the first one is retrieved.

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) {
                [...]
        });
    });
}

来源：https://stackoverflow.com/questions/29600009/jquery-code-not-working-without-breakpoint