HTML动态弹出框

Question

在我的jsp中，我有一个for each循环(spring mvc)。

<c:forEach items="${ce}" var="contractEntitlement">
    <c:if test="${contractHeader.id ==  contractEntitlement.chId}" >
        <tr>
            TD's to show each fields ....
            <td>
                <div class="center">
                    <a href="/view/viewcontract/update/ce/${contractEntitlement.id}" id="id-btn-dialog2" class="btn btn-info btn-sm">Confirm Dialog</a>
                </div>
                <div id="dialog-confirm" class="hide">
                    <div class="alert alert-info bigger-110">
                        These items will be permanently deleted and cannot be recovered.
                    </div>

                    <div class="space-6"></div>

                    <p class="bigger-110 bolder center grey">
                        Are you sure?
                    </p>
                </div><!-- #dialog-confirm -->
            </td>
        </tr>
    </c:if>
</c:forEach>

每条记录都有一个用于删除的按钮。我的jquery是：

$( "#id-btn-dialog2" ).on('click', function(e) {
    e.preventDefault();
    var href = ($(this).attr('href'));
    alert(href);

    $( "#dialog-confirm" ).removeClass('hide').dialog({
        resizable: false,
        width: '320',
        modal: true,
        buttons: [
            {
                "class" : "btn btn-danger btn-minier",
                click: function() {
                    $( this ).dialog( "close" );
                    window.location = href;
                }
            }
            ,
            {
                "class" : "btn btn-minier",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
}); 

这只适用于第一条记录，但当我单击其余记录时，它只会重定向到没有传递jquery的页面。我尝试基于这个堆栈溢出问题进行更改：

Passing data to a jQuery UI Dialog

$( 'a[href*="/view/viewcontract/update/ce/${contractEntitlement.id}"]' ).on('click', function(e) {

但是这样一来，即使是第一条记录也不会再传递到jquery中。你知道怎么让我的jquery更有活力吗？

Answer 1

如前所述，需要唯一的id才能正常工作。在jquery上，当DOM准备就绪时：

var i=0;
$('.testing').each(function(){     // testing is the class name
    i++;
    var newID='id-btn-dialog2'+i;  // increment the id +1 (unique)
    $(this).attr('id',newID);      // Assign the new id
    $(this).val(i);
});

现在我们有了唯一的id，需要得到点击的按钮的id并弹出消息框。在jquery中：

$('a.testing').on('click', function(e) { 
    var id = $(this).attr('id');
    var href = $(this).attr('href');
    alert(href);
    e.preventDefault();

    $( "#dialog-confirm" ).removeClass('hide').dialog({
        resizable: false,
        width: '320',
        modal: true,
        buttons: [
            {
                "class" : "btn btn-danger btn-minier",
                click: function() {
                    $( this ).dialog( "close" );
                    window.location = href;
                }
            }
            ,
            {
                "class" : "btn btn-minier",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });

}); 

这个方法很有效，并且能够解决我的问题。上面的jsp是相同的，除了：

<a href="/view/viewcontract/update/ce/${contractEntitlement.id}" id="id-btn-dialog2" class="btn btn-info btn-sm testing">Confirm Dialog</a>

添加“测试”类。