获取打开jquery对话框的按钮id

Question

我有多个 buttons.On 单击按钮，出现 jquery 对话框。我想知道打开对话框的按钮的 ID。这是我的 jsp 代码

<tbody>
<c:forEach var="history" items="${history}" varStatus="loopCounter">
<c:forEach var="child" items="${history.child}" varStatus="loopCounter2">
<tr>
        <td align="left">
            <span class = "item">
                <img src="img/vendor_logos/<c:out value="${child.courierProduct.logoName}" />"/>
            </span>
        </td>
        <td align="left">
            <span>
                <c:out value="${child.routeDetails.sourceName}" />
            </span>
        </td>
        <td align="left">
            <span>
                <c:out value="${child.routeDetails.destinationName}" />
            </span>
        </td>
        <td align="left">
            <span class="cost" style="font-size: 23px;"><img src="img/rs.png" />
                <c:out value="${history.cost}" />/-
            </span>
        </td>
        <td align="left">
            <span>
                <c:out value="${child.orderTime}" />
            </span>
        </td>
        <td align="left">
        <span>
        /* this div id i want to get in the jquery function */
        /* it is inside for so there can be multiple div which can trigger dialog box */
        <div id="${loopCounter.index}" name = "rate" class="rate" style="" title="Rate">Submit Review</div>
        </span>
        </td>

</tr>
 </c:forEach>
 </c:forEach>
</tbody>

这是对话框div

<div id="rateDialog" class="rateDialog" style="display:none;height:250px;width:500px;" title="Rating">
        <div id="showDialogMessage"></div>
        <label>Rate your overall satisfaction:</label>
        <div>
         <input type="radio" name="rating" value="1" class="star"/>
        <input type="radio" name="rating" value="2" class="star"/>
        <input type="radio" name="rating" value="3" class="star"/>
        <input type="radio" name="rating" value="4" class="star"/>
        <input type="radio" name="rating" value="5" class="star"/>
        </div>
        <br/>
        <label>Please provide your review: </label>
        <textarea name="reviewArea" rows="5"></textarea>
        <input id="submit" type="submit" value="Submit" style="margin : 18px 0px 0px 93px;"/>
        </div>

这里是jquery函数

<script>
 $(document).ready(function() {
 $(function() {
     var rateDialog = $("#rateDialog").dialog({
         autoOpen: false,
         minHeight:250,
            width: 400,
            height: 265,  
         open: function( event, ui ) {
             $("#showDialogMessage").hide();
             $('#reviewArea').val('');
             }
         });

         $(".rate").on("click", function() {
             // Display the dialog
             rateDialog.dialog("open");
             alert($('div[name=rate]').attr('id'));
         });
 });
 $("#submit").click(function(e) {
 $("#showDialogMessage").hide();
  var xmlhttp;
     $("#submit").prop('disabled',true);
     alert("called");
        var url="";
        if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {

            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                $("#submit").removeAttr('disabled');
                document.getElementById("showPasswordMessage").innerHTML=xmlhttp.responseText;
                $("#showPasswordMessage").show();
            }
        }

        xmlhttp.open("GET", url, true);
        xmlhttp.send();
 });
  });
</script>

我试过这个

alert($('div[name=rate]').attr('id'));

但它每次都给出 0。

Answer 1

只需在 click 处理程序中使用 $(this)，如：

$(".rate").on("click", function() {
    //use $(this) -- this points to the element you clicked on
    alert( $(this).attr("id") ); //alerts the div's id
    // Display the dialog
    rateDialog.dialog("open");
    //alert($('div[name=rate]').attr('id'));        
});

Answer 2

您可以使用 this.id 或 event.target.id ：this 引用当前元素。

$(".rate").on("click", function(event) {
    // Display the dialog
    rateDialog.dialog("open");
    alert(this.id);   //event.target.id
});

Answer 3

只需使用当前对象this关键字

var id = $(this).attr('id');

获取打开jquery对话框的按钮id

get the id of button who has opened the jquery dialog box

javascript

jquery

jsp

jquery-dialog