jquery проблемы с событием клика

У меня возникают проблемы с событием .click() в Internet Explorer и Chrome.

Итак, у меня есть это меню фильтров:

<div id="filter-checkboxes" style="text-align: left; margin-bottom: 20px;">
    <input type="checkbox" id="crop-checkbox" onclick="init_filter('crop');" />
    <span id="crop-span">Crop</span>
    <br />

    <input type="checkbox" id="resize-checkbox" onclick="init_filter('resize');" />
    <span id="resize-span">Resize</span>
    <br />

    [...]
</div>

В конце init_filter(filter) вызывается другая функция, которая отправляет запрос ajax

function apply(action)
{
    var apply_btn = $("#apply-filter-btn");
    var values = null;

    $(document).ready(function(){
        apply_btn.unbind("click");
        apply_btn.click(function(){
            switch (action)
            {
                case "crop":
                    values  =   "x=" + $("#x").val() + "&y=" + $("#y").val() +
                    "&w="   + $("#w").val() + "&h=" + $("#h").val();

                    if ($("#w").val() !== "0" && $("#h").val() !== "0")
                        apply_send_req(action, apply_btn, values);
                break;
            }
        });
    });
}

Проблема в том, что существует задержка перед отправкой фактического запроса. Это прекрасно работает только в Firefox... Итак, я спрашиваю, что я могу сделать, чтобы предотвратить это?


click jquery
person wikiz    schedule 05.07.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Принимая во внимание, что весь этот код находится внутри функции, я думаю, вам следует удалить раздел готовности документа. Если вы вызываете «применить» при загрузке, оберните вызов в оператор готовности документа, а не связывайте его внутри функции. Это может решить вашу проблему, поскольку вы можете добавить событие готовности документа ПОСЛЕ его запуска.

function apply(action)
{
    var apply_btn = $("#apply-filter-btn");
    var values = null;

    apply_btn.unbind("click");
    apply_btn.click(function(){
        switch (action)
        {
            case "crop":
                values  =   "x=" + $("#x").val() + "&y=" + $("#y").val() +
                "&w="   + $("#w").val() + "&h=" + $("#h").val();

                if ($("#w").val() !== "0" && $("#h").val() !== "0")
                    apply_send_req(action, apply_btn, values);
            break;
        }
    });
}
person Fenton    schedule 05.07.2010
comment
Удаление выбора .ready немного помогло, но поведение не такое быстрое, как в firefox. Я имею в виду, что в Firefox это работает мгновенно. Но эй, это не первая проблема, с которой я сталкиваюсь в Internet Explorer :( - person wikiz; 05.07.2010
comment
@wikiz - кажется, вечная борьба с Internet Explorer, но версия 9 должна стать значительным улучшением! - person Fenton; 06.07.2010
comment
Надеюсь, мне наконец удалось решить проблему, и это не имело ничего общего с состоянием .click()... это как-то связано с параметром async: false для запроса ajax. - person wikiz; 06.07.2010

arrow_upward
0
arrow_downward

Просто удар в темноту, не должны ли вы определять свой apply_btn в разделе готовности документа, иначе есть риск, что он может не существовать, и ваш var будет неопределенным?

$(document).ready(function(){
    var apply_btn = $("#apply-filter-btn"); // <-- inside .ready()
person Ben Everard    schedule 05.07.2010
comment
Конечный результат тот же, даже если я определяю var apply_btn внутри события .ready(). Другое решение (не очень хорошее) будет состоять в том, чтобы иметь одну кнопку применения для каждого фильтра... Это, вероятно, решит задержку... Я не уверен, я не пробовал, так как я хочу минимизировать насколько это возможно количество кода - person wikiz; 05.07.2010
comment
@wikiz: Вы уверены, что конечный результат будет таким же, или вы просто предполагаете? - person Tomas Aschan; 05.07.2010
comment
Я только что попробовал это с переменной apply_btn внутри готового выбора. - person wikiz; 05.07.2010