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

在单击产品时显示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();
        }
    });
}

函数showUrlInDialog（url）{
变量标记=$（“”）；
$（'imgLoader'）.show（）；
$.ajax({
url:url，
成功：功能（数据）{
html（数据）.dialog({
莫代尔：是的，
标题：“产品库存明细”，
宽度：600，
身高：600
}).对话框（“打开”）；
$（'#imgLoader'）.hide（）；
ShowBeginingInventory（）；
}
});
}

…下面是执行load方法的函数

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.');
    });
}

函数showBeginingInventory（）{
log（'计算开始库存'）；
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；
日志（url\u到\u加载）；
$（“#begInv”）.html（“加载…”）；
$（“#begInv”）.load（url_to_load，function（）{
console.log（'完成加载'）；
});
}

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

上面的代码在第一次单击产品代码时起作用，但在第二次单击/重新加载时，它不能正确显示BeginingInventory（）

在我的控制台上，显示showBeginingInventories（）已执行，但加载的html未显示

---

有什么想法吗？谢谢你的帮助

问题似乎在于，由于元素

begInv

来自对话框，因此每次加载对话框元素时，都会创建一个id为

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');

var标记=$（''）；
....
html（数据）.dialog({
莫代尔：是的，
标题：“产品库存明细”，
宽度：600，
身高：600，
关闭：函数（）{
setTimeout（函数（）{
tag.dialog（'destroy'）.remove（）
})
}
}).对话框（“打开”）；

---

演示：，

对话框中是否有像

pDetailsProdCode

这样的元素Hi arun，不，不是..是的，在对话框中..这可能是原因。。。。。因为当第二次点击时，有多个元素具有相同的ID。谢谢@ArunPJohny的提示，但是当用户关闭对话框时，元素不是被删除了吗？