【问题标题】:.blur() does not trigger when clicking outside datepicker单击外部日期选择器时,.blur() 不会触发
【发布时间】:2012-08-28 12:59:19
【问题描述】:

我有四个文本输入的.blur() 事件,其中附加了日期选择器和时间选择器。当我“标签”到下一个控件时,它工作正常,但是当我点击外面的某个地方时,事件不会触发。是我做错了什么,还是.blur() 事件有问题?

事件的 JavasSript 代码:

    $(".calcTimespan").blur(function () {
        $.ajax({
            type: "GET",
            url: '@Url.Action("CalculateTimespan")',
            data: {
                "franDatum": $("#Dyk_FranDatum").val(),
                "franTid": $("#Dyk_FranTid").val(),
                "tillDatum": $("#Dyk_TillDatum").val(),
                "tillTid": $("#Dyk_TillTid").val()
            },
            dataType: 'html',
            cache: false,
            success: function (data) {
                if (data != "FAIL")
                    $("#Dyk_DyktidMinuter").val(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("Ett fel inträffade vid hämtning av dykning!");
            }
        });
    });

HTML:

    <div>
        <label for="Fr_n_datum">Fr&#229;n datum</label>
        <label style="margin-left: 40px;">Tid</label>
        <br />
        <input class="halv datumpicker calcTimespan" id="Dyk_FranDatum" name="Dyk.FranDatum" type="text" value="" />
        <input class="halv tidpicker calcTimespan" id="Dyk_FranTid" name="Dyk.FranTid" type="text" value="" />
    </div>
    <br />

    <div>
        <label for="Till_datum">Till datum</label>
        <label style="margin-left: 50px;">Tid</label>
        <br />
        <input class="halv datumpicker calcTimespan" id="Dyk_TillDatum" name="Dyk.TillDatum" type="text" value="" />
        <input class="halv tidpicker calcTimespan" id="Dyk_TillTid" name="Dyk.TillTid" type="text" value="" />
    </div>
    <br />

    <div>
        <label for="Dyktim__min_">Dyktim (min)</label>
        <label style="margin-left: 33px;">Pris per minut</label>
        <br />
        <input class="halv" id="Dyk_DyktidMinuter" name="Dyk_DyktidMinuter" type="text" value="" />
        <input class="halv" id="Dyk_Pris" name="Dyk.Pris" type="text" value="" />
    </div>

我只针对 IE9。

编辑 似乎这些事件运行良好。问题是,当我在日期选择器中单击以选择日期时,已经在日期上按下鼠标,事件被触发,即使输入文本中的组件尚未设置该值!

现在,我必须找到一种方法来获取“鼠标按下”日期或将事件延迟到它在输入文本中实际设置的时间。

【问题讨论】:

  • 那不是 HTML.. 你应该插入后端代码的生成的输出
  • 点击外部时元素是否失去焦点? blur() 事件仅在元素失去焦点时被调用。
  • 你说得对,现在更新了。
  • @BartFriederichs,是的,光标在另一个输入框中闪烁。
  • 你怎么能确定 .blur() 在外面点击时不会触发。这是一个示例jsfiddle.net/m9jEq,我用console.log("in") 替换了$.ajax,并且每次input.calcTimespan 失去焦点时都会显示“in”消息(在IE9 中测试)。所以我认为你的ajax调用有问题。

标签: javascript jquery internet-explorer-9 onblur


【解决方案1】:

我实际遇到的问题是:jqueryUI datepicker fires input's blur before passing date, avoid/workaround?

我使用 Purells 答案的变体来解决我的问题。

感谢大家的支持。正是这个问题的帮助让我找到了真正的问题。

【讨论】:

  • 做得很好,没有选择他的答案作为真正的答案,并且在此过程中丢失了答案以供将来参考。因为我现在找不到了。
【解决方案2】:

IE9 似乎存在问题,并且模糊事件未始终触发,请尝试使用 focusout 绑定元素。

【讨论】:

  • 感谢您的回答,但它并没有帮助,完全相同的行为。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-02
  • 1970-01-01
  • 2019-03-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多