0

在单击产品时显示 jQuery ui 对话框后，我正在加载另一个 jquery load() 方法：

$(".productCode").on('click', function() {
    var productCode = $(this).text();
    var userId = jQ( '#field_user_id option:selected' ).val();
    var accountParam = $('#accCode').val();
    var branchParam = $('#branchCode').val();
    var getUrl = "http://admin.myapp.com/inventory_mgmt_uploads/product_details/" + productCode + "/" + userId + "/" + accountParam + "/" + branchParam;
    console.log( getUrl );
    showUrlInDialog( getUrl );
});

下面是我显示 jQuery UI 对话框的方式：

function showUrlInDialog( url ) {
    var tag = $("<div></div>");
    $('#imgLoader').show();
    $.ajax({
        url: url,
        success: function( data ) {
        tag.html(data).dialog({
            modal: true,
            title: "Product Inventory Details",
            width: 600,
            height: 600
        }).dialog('open');

        $('#imgLoader').hide();
        showBeginningInventories();
        }
    });
}

...这是执行加载方法的函数。

function showBeginningInventories(){
    console.log('computing beginning inventories.');
    var selectedText = $('#selectUom').find('option:selected').text();
    var productCode = $('#pDetailsProdCode').text();
    var userId = $('#pDetailsUserId').text();
    var url_to_load = "http://admin.myapp.com/inventory_mgmt_uploads/compute_inventories/" + productCode + "/" + userId + "/acc-mer3249/br-1/" + selectedText;
    console.log(url_to_load);

    $( "#begInv" ).html("<i>Loading...</i>");
    $( "#begInv" ).load(url_to_load, function() {
        console.log('done loading.');
    });
}

请注意，这只是一个示例代码，我知道我应该使用 jQuery on() 方法而不是 live()。

上面的代码在第一次点击产品代码时有效，但在第二次点击/重新加载时，它没有正确执行 showBeginningInventories()。

在我的控制台上，它说 showBeginningInventories() 已执行，但加载的 html 未显示...

有任何想法吗？谢谢你的帮助！

4

1 回答 1

1

问题似乎是，由于元素begInv来自对话框，因此每次加载对话框元素时begInv都会创建一个具有 id 的新元素....这意味着现在有多个具有该 id 的元素，这是错误的，因为元素的 id必须是唯一的。一个简单的解决方法是在对话框关闭后将其销毁。

var tag = $('<div></div>');
....
tag.html(data).dialog({
    modal: true,
    title: "Product Inventory Details",
    width: 600,
    height: 600,
    close: function(){
        setTimeout(function(){
            tag.dialog('destroy').remove()
        })
    }
}).dialog('open');

演示：问题，解决方案

于 2013-10-15T03:12:14.927 回答