javascript - 我的 javaScript 函数没有在正确的时间被调用

Question

好吧，所以我最初做的是在选择更改后向我的表单和标签添加一个类。效果很好。我现在想做的是使保存按钮仅在选择更改时显示。

document.getElementById('href_attr').addEventListener('change', change, false);
document.getElementById('alt_attr').addEventListener('change', change, false);
document.getElementById('title_attr').addEventListener('change', change, false);

//document.getElementById('href_attr').addEventListener('change', allChanged(), false);


function change() {
    alert('test');
    utils.addClass(form, 'changed');
    utils.addClass(this.parentNode, 'changed');
}

function allChanged(){
    utils.show(save_button);
}

document.getElementById('save_button').addEventListener('click', save, false);

因此，由于某种原因，当我调用更改函数时，警报会在正确的时间发生(当我更改选择框时)。当我让它调用 allChanged 函数时，它会在加载页面时调用。这是我调用这两个函数的唯一地方。另外，我正在寻找一种在所有选择(而不仅仅是一个)更改时显示保存按钮的方法。我怎样才能做到这一点？我遇到了 jQuery 的 $.when 并尝试过:

$.when(href_attr.addEventListener('change'),
        alt_attr.addEventListener('change'),
    title_attr.addEventListener('change')
    ).done(allChanged());

和

$.when("#href_attr,#alt_attr,#title_attr").change(allChange());

运气不好。

Answer 1

您可以尝试使用回调。例如，在您选择的输入上:

$('selector').on('change', function(event) {
    if ( $(this).val() )
    {
        // select has value so we can handle accordingly.
        updateClassNames(function(response() {
            alert('class names updated');
            $('selector:hidden').show();
        });
    }
    else
    {
        // select has no value so don't do anything (or undo what we just did).
    }
});

funciton updateClassNames(callback) {
    $('selector').addClass('myClass');
    callback();
}