Question

在点击产品后显示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没有显示......

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

Answer 1

问题似乎是因为元素begInv来自对话框，每次加载对话框元素时都会创建一个标识为begInv的新元素....这意味着现在有了具有该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');

演示：Problem，Solution

jQuery UI对话框在第二次加载时不调用函数

1 个答案: