Javascript 使DOM了解动态创建的项

我有一个进程需要使用动态添加的对象。如何在Jquery中访问这些对象

当前：当transtypesvalue等于“转入”或“转出”时，不显示两个div标记“#transferorProfileGroups”和“#TransfereProfile”

我想要的结果：在满足条件时显示或隐藏这些div标记

var JSON = JSON || {};
// implement JSON.stringify serialization
JSON.stringify = JSON.stringify || function (obj) {
var t = typeof (obj);
if (t != "object" || obj === null) {
    // simple data type
    if (t == "string")
        obj = '"' + obj + '"';
    return String(obj);
} else {
    // recurse array or object
    var n, v, json = [], arr = (obj && obj.constructor == Array);
    for (n in obj) {
        v = obj[n];
        t = typeof (v);
        if (t == "string")
            v = '"' + v + '"';
        else if (t == "object" && v !== null)
            v = JSON.stringify(v);
        json.push((arr ? "" : '"' + n + '":') + String(v));R
    }
    return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
}
};

$(document).ready(function () {
setJobExceptionDataTable();

handleTransferTypeSelection();

});

function handleTransferTypeSelection() {
$('#tranTypes').live('change' , function () {
alert("help")
    var transfertypesvalue = $(this).val();

    if (transfertypesvalue == "Transfer In") {
        $('#transferorProfileGroups]').removeClass('invisible');
        $('#transfereeProfile').addClass('invisible'); 

    }
    else if (transfertypesvalue == "Transfer Out") {
        $('#transfereeProfile').removeClass('invisible');
        $('#transferorProfileGroups').addClass('invisible');
    }
    else {
        $('#transfereeProfile').addClass('invisible');
        $('#transferorProfileGroups').addClass('invisible');
    }
});
}

function getJobExceptionDetails(jobId, jobName, jobStatus, jobSubmitted, jobExceptionType) {
var getDetailsUrl = '';
var setTables = '';

switch (jobExceptionType) {
    case "ProfileSelectionRequired":
        setTables = setProfileSelectionRequiredDataTables;
        getDetailsUrl = "/JobException/GetProfileSelectionRequiredDetails";
        break;
    default:
        alert('JobExceptionType not defined. (' + jobExceptionType + ')');
        return false;
        break;
}

$.ajax({
    url: getDetailsUrl,
    type: "GET",
    data: {
        JobId: jobId,
        JobStatus: jobStatus,
        JobSubmitted: jobSubmitted,
        JobName: jobName,
        JobExceptionType: jobExceptionType
    },
    beforeSend: function () {
        $('#loading').show();
    },
    success: function (result) {
        $(".detailsModalContent").append(result);

        setTables();

        $("#detailsModal").modal({
            autoResize: true,
            autoPostition: true,
            closeHTML: "",
            dataCss: {
                padding: "10px"
            },
            minHeight: 350,
            maxHeight: 700,
            minWidth: 900,
            maxWidth: 900,
            overlayClose: true
        });

        $("#btnResolveProfileSelectionRequired").click(function () {
            handleResolveProfileSelectionRequired();
        });

        $('.datepicker').datepicker();

        $('input[type=checkbox][name=profilegroup]').change(function () {
            checked = $(this).attr('checked');
            if (checked) {
                $('input[type=checkbox][name=profilegroup]').removeAttr('checked');
                $(this).attr('checked', 'checked');
            }
        });
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert('Failed to retrieve items, please try again.');
    },
    complete: function () {
        $('#loading').hide();
    }
});
}



function handleResolveProfileSelectionRequired() {
var valid = true;
var msg = '';

var notEmpty = /\S/

var transferEffectiveDate = $("#TransferEffectiveDate").val();
if (!notEmpty.test(transferEffectiveDate)) {
    msg += "Please select a transfer effective date.\r\n";
    valid = false;
}

var selectedGroup = $("select[name='profileGroups']").val();
if (selectedGroup == undefined || selectedGroup <= 0) {
    msg += "Please select a transferor profile group.\r\n";
}

if (!valid) {
    alert(msg);
} else {
    $.ajax({
        url: "/JobException/ResolveProfileSelectionRequired/",
        dataType: "json",
        traditional: true,
        type: "POST",
        data: {
            __RequestVerificationToken:       $('input[name=__RequestVerificationToken]').val(),
            JobId: $("#JobException_JobId").val(),
            TransferEffectiveDate: transferEffectiveDate,
            SelectedTransferorProfileGroupId: selectedGroup
        },
        beforeSend: function () {
            $('#loading').show();
        },
        success: function (result) {
            window.location.reload();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert('Failed to resolve profile selection required job exception, please try again.');
            window.location.reload();
        },
        complete: function () {
            $('#loading').hide();
        }
    });
}
}

function setJobExceptionDataTable() {
aoColumnsObject =
[
    {
        "sName": "JobId",
        "sType": "numeric",
        "fnRender": function (oObj) {

            var jobId = oObj.aData[0];
            var jobName = oObj.aData[1];
            var jobSubmitted = oObj.aData[2];
            var jobStatus = oObj.aData[3];

            return '<a href="/" class="detailsLink"' + '" jobid="' + jobId + '" jobname="' + jobName + '" jobstatus="' + jobStatus + '" jobsubmitted="' + jobSubmitted + '">' + jobId + "</a>";
        }
    },
    { "sName": "JobName" },
    { "sName": "JobSubmitted", "sType": "date" },
    { "sName": "JobStatus" }
];

var oTable = $("#orderQueueTable").dataTable({
    "bServerSide": true,
    "sAjaxSource": "/JobException/GetJobExceptionItems/",
    "bProcessing": false,
    "fnServerData": function (sSource, aoData, fnCallback) {
        aoData.push({ "name": "jobExceptionType", "value": $("#JobExceptionType").val()       });

        $.ajax({
            "dataType": 'json',
            "type": "GET",
            "url": sSource,
            "data": aoData,
            "beforeSend": function () {
                $("#loading").removeClass('invisible');
            },
            "success": fnCallback,
            "complete": function () {
                $(".detailsLink").live('click', function () {
                    getJobExceptionDetails($(this).attr('jobid'), $(this).attr('jobname'), $(this).attr('jobstatus'), $(this).attr('jobsubmitted'), $("#JobExceptionType").val());
                    return false;
                });

                $("#loading").addClass('invisible');
            }
        });
    },
    "aoColumns": aoColumnsObject,
    "iDisplayLength": 25,
    "bDestroy": true,
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bAutoWidth": false
});
}

function setProfileSelectionRequiredDataTables() {
$("#orderInfoTable").dataTable({
    "bJQueryUI": true,
    "bAutoWidth": false,
    "bDestroy": true,
    "bSort": false,
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false,
    "aoColumns": [
            null,
            null,
            { "sType": "date" },
            null
        ]
});

var JSON=JSON | |{}；
//实现JSON.stringify序列化
JSON.stringify=JSON.stringify | |函数（obj）{
var t=类型（obj）；
if（t！=“object”| | obj==null）{
//简单数据类型
如果（t==“字符串”）
obj='“'+obj+'”；
返回字符串（obj）；
}否则{
//递归数组或对象
var n，v，json=[]，arr=（obj&&obj.constructor==数组）；
用于（obj中的n）{
v=obj[n]；
t=类型（v）；
如果（t==“字符串”）
v=“'”+v+“'”；
else if（t==“object”&&v！==null）
v=JSON.stringify（v）；
json.push（（arr？“：”+n+“：”）+String（v））；R
}
返回（arr？”[“：“{”）+字符串（json）+（arr？”]：“}”）；
}
};
$（文档）.ready（函数（）{
setJobExceptionDataTable（）；
HandletTransferTypeSelection（）；
});
函数handleTransferTypeSelection（）{
$（'#transtypes'）.live（'change'，function（）{
警报（“帮助”）
var transfertypesvalue=$（this.val（）；
如果（transfertypesvalue==“转入”）{
$（“#transferorProfileGroups]”）。removeClass（“不可见”）；
$（'#TransfereProfile'）.addClass（'不可见'）；
}
else if（transfertypesvalue==“转出”）{
$（“#TransfereProfile”）.removeClass（“不可见”）；
$（“#transferorProfileGroups”）.addClass（“不可见”）；
}
否则{
$（'#TransfereProfile'）.addClass（'不可见'）；
$（“#transferorProfileGroups”）.addClass（“不可见”）；
}
});
}
函数getJobExceptionDetails（jobId、jobName、jobStatus、jobSubmitted、jobExceptionType）{
var getDetailsUrl=''；
变量可设置项=“”；
开关（jobExceptionType）{
案例“ProfileSelectionRequired”：
setTables=setProfileSelectionRequiredDataTables；
getDetailsUrl=“/JobException/GetProfileSelectionRequiredDetails”；
打破
违约：
警报（'JobExceptionType未定义。（'+JobExceptionType+'））；
返回false；
打破
}
$.ajax({
url:getDetailsUrl，
键入：“获取”，
数据：{
JobId:JobId，
JobStatus:JobStatus，
JobSubmitted:JobSubmitted，
JobName:JobName，
JobExceptionType:JobExceptionType
},
beforeSend:函数（）{
$（“#加载”）.show（）；
},
成功：功能（结果）{
$（“.detailsModalContent”）.append（结果）；
可设置项（）；
$（“#detailsModal”）.modal({
自动调整大小：正确，
自动定位：正确，
关闭HTML:“”，
dataCss：{
填充：“10px”
},
身高：350，
最大高度：700，
最小宽度：900，
最大宽度：900，
套圈：对
});
$（“#btnResolveProfileSelectionRequired”）。单击（函数（）{
HandlerResolveProfileSelectionRequired（）；
});
$（'.datepicker'）.datepicker（）；
$（'input[type=checkbox][name=profilegroup]'）。更改（函数（）{
checked=$（this.attr（'checked'）；
如果（选中）{
$（'input[type=checkbox][name=profilegroup]'）。removeAttr（'checked'）；
$（this.attr（'checked'，'checked'）；
}
});
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
警报（'检索项目失败，请重试'）；
},
完成：函数（）{
$（“#加载”）.hide（）；
}
});
}
函数handleResolveProfileSelectionRequired（）{
var valid=true；
var msg=''；
var notEmpty=/\S/
var transferEffectiveDate=$（“#transferEffectiveDate”）.val（）；
如果（！notEmpty.test（transferEffectiveDate））{
msg+=“请选择转账生效日期。\r\n”；
有效=错误；
}
var selectedGroup=$（“选择[name='profileGroups']”）val（）；
如果（selectedGroup==undefined | | selectedGroupjQuery绑定如“live”，则在DOM完成加载后，“click”将绑定到元素。任何AJAX响应的元素都不会绑定到它们。相反，您应该使用“.on”方法

像这样：

$(document).on('click', '.my_new_element', function() {
    //your code here
});

这将起作用，因为“.on”绑定到文档而不是特定的元素。并且由于第二个参数（“#my_new_element”）是一个过滤器，因此单击事件仅在对该元素执行时才会触发此函数

因此，只要新的HTML元素通过AJAX附带“my_new_element”类，它们就会在对它们执行事件时启动您的函数

澄清一下：您不需要绑定到“文档”。您可以将“.on”方法绑定到任何元素中，该元素保证在调用AJAX之前加载。例如，您的所有站点都位于
中。在这种情况下，您可以这样绑定：

$('.content').on('click', '.my_new_element', function() {
    //your code here
});

当DOM完成加载时，像“live”、“click”这样的jQuery绑定将绑定到元素。任何AJAX响应的元素都不会绑定到它们。相反，您应该使用“.on”方法

像这样：

$(document).on('click', '.my_new_element', function() {
    //your code here
});

这将起作用，因为“.on”绑定到文档而不是特定的元素。并且由于第二个参数（“#my_new_element”）是一个过滤器，因此单击事件仅在对该元素执行时才会触发此函数

因此，只要新的HTML元素通过AJAX附带“my_new_element”类，它们就会在对它们执行事件时启动您的函数

澄清一下：您不需要绑定到“文档”。您可以将“.on”方法绑定到任何元素中，该元素保证在调用AJAX之前加载。例如，您的所有站点都位于
中。在这种情况下，您可以这样绑定：

$('.content').on('click', '.my_new_element', function() {
    //your code here
});

我解决了一个我没看到的小问题，因为我
function handleTransferTypeSelection() {
$('#tranTypes').live('change' , function () {
var transfertypesvalue = $('#tranTypes option:selected').text();
                                        // ^ ^ ^ ^ ^ ^ ^ ^ ^ the changes
if (transfertypesvalue == "Transfer In") {
    $('#transferorProfileGroups]').removeClass('invisible');
    $('#transfereeProfile').addClass('invisible'); 

}
else if (transfertypesvalue == "Transfer Out") {
    $('#transfereeProfile').removeClass('invisible');
    $('#transferorProfileGroups').addClass('invisible');
}
else {
    $('#transfereeProfile').addClass('invisible');
    $('#transferorProfileGroups').addClass('invisible');
}
});
}