1

動的に追加されたオブジェクトを使用する必要があるプロセスがあります。Jquery でこれらのオブジェクトにアクセスするにはどうすればよいですか。

現在: 2 つの div タグ '#transferorProfileGroups' と '#transfereeProfile' が表示されません。transtypes の値が "transfer in" または "transfer out" と等しい場合。

欲しい結果：条件が満たされたときにこれらの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
        ]
});

}

ここにhtmlがあります：

@model MarylinMonroeMvcSite.Models.JobException.ProfileSelectionRequiredModel

<div class="float-left">Profile Selection Required Resolution</div>

<div class="float-right">Job Id: @Model.JobException.JobId</div>
<div class="clear"></div>
<br />

<form method="post" target="/JobException/ResolveProfileSelectionRequired"     id="profileSelectionResolutionForm">

@Html.AntiForgeryToken()

@Html.HiddenFor(x => x.JobException.JobId, new { value = Model.JobException.JobId })

<div>
    Job Id: @Model.JobException.JobId<br />
    Job Name: @Model.JobException.JobName<br />
    Job Submitted: @if (Model.JobException.JobSubmitted.HasValue)
    { @Model.JobException.JobSubmitted.Value.ToString("MM/dd/yyyy                 HH:mm:ss") }<br />
    Job Status: @Model.JobException.JobStatus
</div>

<br />

<div id="transferTypes">
    Select Transfer Type:
    <select name="tranTypes" id="tranTypes">
        <option value="0">Please Choose Transfer Type</option>
        @foreach (var type in Model.TransferTypes)
        {
            <option value="@type.TypeId">@type.TypeDescription</option>
        }
    </select>
</div>

<br />

<div>
    Transfer Effective Date: 
    @Html.TextBoxFor(x => x.TransferEffectiveDate, new { @class = "datepicker" })
</div>

<br />

<div id="transferorProfileGroups" class="invisible">
    Select Transferor Profile Group<br />
    <select name="profileGroups">
        <option value="0">Please Choose Group</option>
        @foreach (var group in Model.TransferorProfileGroups)
        {
            <option value="@group.GroupId">@group.DisplayName</option>
        }

    </select>
</div>

<div id="transfereeProfile" class="invisible">
    Select Transferee Profile Group <br />
    <select name="transfereeGroups">
        <option value="0">Please Choose Group</option>
        @foreach (var feree in Model.TransfereeList)
        {
            <option value="@feree.TransfereeListId">@feree.TransfereeName</option>
        }
     </select>
  </div>

<br />

<div>
    <input type="button" value="Submit" id="btnResolveProfileSelectionRequired" />
</div>

</form>
4

2 に答える 2

1

「ライブ」、「クリック」などの jQuery バインディングは、DOM の読み込みが完了すると要素にバインドされます。AJAX 応答である要素は、それらにバインドされません。代わりに、「.on」メソッドを使用する必要があります。

このような：

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

「.on」は特定の要素ではなくドキュメントにバインドされているため、これは機能します。また、2 番目のパラメーター ('#my_new_element') はフィルターであるため、クリック イベントは、その要素に対して実行されたときにのみこの関数を起動します。

そのため、新しい HTML 要素が AJAX を介して「my_new_element」クラスで提供されている限り、イベントが実行されたときに関数が起動されます。

明確にするために、「ドキュメント」にバインドする必要はありません。「.on」メソッドは、AJAX が呼び出される前にロードされることが保証されている任意の要素にバインドできます。たとえば、すべてのサイトが<div class="content"></div>この場合、次のようにバインドできます。

$('.content').on('click', '.my_new_element', function() {
    //your code here
});
于 2013-09-17T20:13:04.727 に答える
0

私が見ていない小さな問題を修正しました。古いバージョンの Jquery を使用していたために .on を使用できなかったので、問題なく動作する .live を使い続けました。ラベルの代わりに値を検索する if ステートメントがありました。したがって、コードは次のとおりです。

function handleTransferTypeSelection() {
$('#tranTypes').live('change' , function () {
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 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');
}
});
}

小さなことがすべての違いを生みます。

于 2013-09-20T15:15:52.680 に答える