Question

我有一个页面有三个非常接近的项目（文本框，下拉列表和超链接。）每个项目都有一个JavaScript事件，最终调用更新页面内容的相同功能。当用户更改文本框的内容，然后单击超链接而不离开文本框时，会发生此问题。文本框的更改事件触发并且其代码正常工作，但按钮的单击事件从不触发（事件顶部的console.log行确认它永远不会被调用）。不会抛出任何错误，并且发生火灾的事件似乎完美无缺。如果在其他时间点击按钮，则会触发按钮的事件。例如，如果用户更改了文本框和选项卡，然后单击超链接，则两个事件最终都会触发。同样，如果用户更改了文本框的内容，然后单击页面上的其他位置，然后单击按钮，则两个事件最终都会触发。

更改事件进行AJAX调用。如果删除此AJAX调用，则两个事件都会触发（问题消失）。我将AJAX调用更改为另一个AJAX调用（更简单的一个），它还阻止了第二个事件的触发。

我使用相同的JavaScript库版本创建了一个单独的应用程序，并尝试在更加可控和更简单的环境中重新创建问题。我根本无法重新创造问题 - 我尝试过的所有事情都被解雇了。

显然，这非常令人沮丧。有没有人知道AJAX调用可能导致第二个事件永远不会执行？

我正在使用ASP.Net MVC 3应用程序，jQuery 1.7.1.1，jQuery.UI 1.8.17和autoNumeric 1.7.4。

此代码是我的测试代码，但它基本上揭示了无法工作的代码结构。希望它有助于澄清发生了什么。

// This function exists like this because the existing code I'm trying to fix
// works like this -- these events are configured inside a function that
// is called from within some of the event handlers. There is good reason for 
// this, but outside the scope of this problem (I think).
InitializeFunction = function () {
    $("#txtAdjustment").on('change', function () {
        console.log('Textbox Changed');
        TestAjaxCall("#resultText");
    });

    $("#lnkApplyToAll").on('click', function () {
        console.log('Link Clicked');
        TestAjaxCall("#resultButton");
    });
};

TestAjaxCall = function (idToUpdate) {
    $.ajax({
        url: '/Home/GetString',
        async: true,
        cache: false,
        data: { 'text': $("#txtAdjustment").autoNumericGet() },
        success: function (result) {
            console.log('Call to server was successful.');
            console.log('Set #foShiftTab');
            $(idToUpdate).html(result);
            console.log('initialize Shift Tab');
            console.log('done');
            InitializeFunction();
        },
        error: handleAjaxSystemError
    });
};

handleAjaxSystemError = function (result, e) {
    console.log('error: ' + result);
};

$(document).ready(function () {
    InitializeFunction();
});

这是html：

<h2>Index</h2>
<input id="txtAdjustment" type="text" class="fo-adjustment" value="100%"/>
<a href="#" id="lnkApplyToAll" class="button">Apply To All</a>
<p id="resultText"></p>
<p id="resultButton"></p>

jQuery AJAX调用阻止事件

0 个答案: