Почему мое событие jQuery focusout (или blur) не запускается?

В нижней части jsfiddle у меня есть этот HTML:

<input type="text" id="BLAboxPaymentAmount" value="2">
</br>
<input type="text" id="BLAboxSection5Total" value="3">

..и этот JQuery:

$(document).on("focusout", '[id$=boxSection5Total]', function (e) {
    var totalvalue = $(this).val();
    //alert("boxSection5Total val is " + totalvalue);
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    //alert("Payment Total val is " + paymenttotalvalue);
    if (totalvalue !== paymenttotalvalue) {
        alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
    } else {
        alert("values ARE equal");
    }
});

Он отлично работает в jsfiddle, но событие не запускается на моей странице Sharepoint - я ввожу значение в boxPaymentAmount ("5"), вводю другое в boxSection5Total ("6"), вкладку off boxSection5Total и не вижу оповещения, как я должен, на основе этого jQuery, который практически идентичен тому, что находится в jsfiddle:

$(document).on("focusout", '[id$=boxSection5Total]', function (e) {
    alert("focusout event has fired");
    var totalvalue = $(this).val();
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    if (totalvalue !== paymenttotalvalue) {
        alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
    }
});

Так что мероприятие даже не запускается - почему бы и нет?

Я запустил страницу в Chrome и F12d в поисках сообщений об ошибках в консоли, но ничего не нашел.

ОБНОВИТЬ

Для А. (не "The") Вольф:

Вот как я создаю элементы в коде:

boxPaymentAmount = new TextBox
{
    CssClass = "dplatypus-webform-field-input"
};

Я также изменил "textarea" на "текст" в HTML в jsfiddle.

ОБНОВЛЕНИЕ 2

Для Джонатена (не Рассела) Кроу:

Я изменил свой JQuery на следующее:

$(document).on("blur", "[id$=boxSection5Total]", function (e) {
    alert("blur event has fired");
    console.log("blur event has fired");
    var totalvalue = $(this).val();
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    if (totalvalue !== paymenttotalvalue) {
        alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
        console.log("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
    }
    else {
        console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
    }
});

... и до сих пор ничего не вижу в консоли из этого обработчика событий.

ОБНОВЛЕНИЕ 3

У меня есть много других функций / обработчиков, которые работают просто отлично; так почему это не загадка. Может быть, если я покажу то, что у меня есть (исключая некоторые кровавые подробности), это может пролить некоторый свет на происходящее (сбойная функция - последняя / внизу):

$(document).ready(function () {
    console.log('The ready function has been reached; Requester and Payee Status sections should be slid up'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
});

/* NOTE: Things that need to take place after all the elements have been constructed need to go here; the ready function can be too early */
$(window).load(function () {
    $('[id$=_AddressRows]').slideUp();
    $('[id$=panelSection2]').slideUp();
    $('[id$=panelSection3]').slideUp();

    $('[id$=ddlPayToVendor]').hide();
});

/* NOTE: this checkbox is only visible if they are not already authenticated; If they select "Yes" (self-identify as UCSC Faculty, Staff, or Student), prompt them to log in */
$(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
    var ckd = this.checked;
    . . . code elided for brevity
});

/* If user selects "payment for self" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form TODO: Should I change these from "change" to "click" */
$(document).on("click", '[id$=rbPaymentForSelf]', function () {
    if (this.checked) {
    . . . code elided for brevity
    }
});

/* If user selects "payment for someone else" (they are seeking payment for someone else, as opposed to themselves), make sections 2 and 3 on the form visible */
$(document).on("click", '[id$=rbPaymentForSomeoneElse]', function () {
    if (this.checked) {
    . . . code elided for brevity

    }
});

$(document).on("click", '[id$=rbPaymentToIndividual]', function () {
    if (this.checked) {
        $('[id$=ddlPayToVendor]').slideUp();
        $('[id$=ddlPayToIndividual]').slideDown();
    }
});

$(document).on("click", '[id$=rbPaymentToVendor]', function () {
    if (this.checked) {
        $('[id$=ddlPayToIndividual]').slideUp();
        $('[id$=ddlPayToVendor]').slideDown();
    }
});

// Refactor this to populate the elements below (description, account codes, tax 1099); may pull from Lists rather than use the hardcoded vals, but if need to do the latter, see http://jsfiddle.net/clayshannon/x8npcpss/3/
$(document).on("change", '[id$=ddlPayToIndividual]', function () {
    var value = $(this).val();
    . . . code elided for brevity

});

// Refactor this ... (see comment above)
$(document).on("change", '[id$=ddlPayToVendor]', function () {
    var value = $(this).val();
    . . . code elided for brevity

});

/* Disallow anything other than 0..9 in the "SSN or ITIN" textbox */
$(document).on("keypress", '[id$=txtbxSSNOrITIN]', function (e) {
    var k = e.which;
    if (k < 48 || k > 57) { e.preventDefault(); }
});

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    var textboxHeight = 15;
    . . . code elided for brevity

});

$(document).on("keyup", "[id$=explainPaymentTextBox]", function (e) {
    console.log("explainPaymentTextBox keyup reached");
    while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height() + 1);
    };
});

HERE IS THE RECALCITRANT ONE (DOESN'T FIRE):
/* Verify that amount in "Total" equals amount in Section 1 "Payment Amount"; this is not working at present; I first tried "focusout" instead of "blur" but neither event fires... */
$(document).on("blur", "[id$=boxSection5Total]", function (e) {
    alert("boxSection5Total's blur event has fired");
    console.log("boxSection5Total's blur event has fired");
    var totalvalue = $(this).val();
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    if (totalvalue !== paymenttotalvalue) {
        alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
        console.log("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
    }
    else {
        console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
    }
});
Источник

2 ответа

Решение

Вы пытались использовать blur Вместо того, чтобы использовать focusout? Разницу между этими двумя событиями можно найти здесь, и, в вашем случае, вы хотите захватить событие только для текстовой области, потому что в ней нет элементов.

Источник

Это была "ошибка новичка" - я забыл присвоить идентификатор элементу. Однажды я изменил код из этого:

boxSection5Total = new TextBox()
{
    CssClass = "dplatypus-webform-field-input"
};
this.Controls.Add(boxSection5Total);

...к этому:

boxSection5Total = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    ID = "boxSection5Total"
};
this.Controls.Add(boxSection5Total);

... Я видел предупреждение о входе в событие.

Таким образом, ОБНОВЛЕНИЕ показывает неисправный код, хотя потребуется кто-то, привыкший динамически создавать элементы html в C#, чтобы поймать его.

Для "полного раскрытия", вот jQuery в его нынешнем виде (работает как задумано):

$(document).on("blur", "[id$=boxSection5Total]", function (e) {
    var totalvalue = $(this).val();
    var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
    if (totalvalue !== paymenttotalvalue) {
        console.log("The value in 'Total' does not equal the previous value in 'Payment Total'");
        alert("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
    }
    else {
        console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
    }
});

Это "осенило меня", когда я "проверил элемент" в инструментах F12 и увидел:

<input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl153" type="text" class="dplatypus-webform-field-input">

(без удостоверения личности).

Источник
Другие вопросы по тегам