Question

在我的jsp中，每个循环都有一个（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的页面。我尝试根据此stackoverflow问题进行更改：

Passing data to a jQuery UI Dialog

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

但有了这个，即使是第一条记录也不再传递给jquery。知道如何让我的jquery更有活力吗？

Answer 1

如上所述，需要使用唯一ID才能使其正常工作。关于DOM准备就绪时的jquery：

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。在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>

在课堂上添加＆＃34;测试＆＃34;。

HTML动态弹出框

1 个答案: