【问题标题】:Handle Textbox and radiobutton event same time in jQuery在 jQuery 中同时处理文本框和单选按钮事件
【发布时间】:2019-06-18 19:19:06
【问题描述】:

我有一个棘手的问题,我的网页上有一个文本框,当我在其中输入内容并从中退出时,我应用了执行的模糊事件。它使用 Ajax 发送 Textbox 的值,然后刷新内容。

以下是代码。

 $("input[type=text]").blur(function (e) {

            var valList = [];

            if ($(this).val() != oldVal) {
                var path = $(this).attr("data-path");
                $(".loading").show();
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("LoadSubControls", "Home")",
                    data: { Name: path, Products: valList },
                    success: function (response) {
                        $("#divEnquiry").empty().html(response);
                        $(".loading").hide();
                    }
                });
            }
        });

现在我的问题是,我在文本框之后立即有另一个控制单选按钮,所以当我在文本框中输入内容并直接单击单选按钮时,只有文本框的模糊事件有效,我想触发模糊和单选按钮事件也是在同一时间。

以下是单选按钮代码。

$("input[type=radio]").change(function (e) {
            var path = $(this).attr("data-path");
            $(".loading").show();
            $.ajax({
                type: "POST",
                url: "@Url.Action("LoadSubControls", "Home")",
                data: { Name: path, Products: valList },
                success: function (response) {
                    $("#divEnquiry").empty().html(response);
                    $(".loading").hide();
                }
            });
        });

请帮忙。

【问题讨论】:

    标签: jquery textbox radio-button


    【解决方案1】:

    在您的 blur 方法中,只需强制点击 radio 即可:

    $("input[type=radio]").trigger('click');
    

    您正在考虑用户在收音机中的点击,而不是任何地方,但为了防止后者,您应该在触发点击事件之前检查radio 是否为checked

    【讨论】:

      【解决方案2】:

      它应该可以按照您的意愿工作。我能想到它为什么不起作用的唯一原因是如果您的单选按钮被预先检查,因此永远不会触发更改事件。

      小例子:

      <textarea id="text"></textarea>
      <input type="radio" id="radio">
      
      $('#text').on('blur', function(){
        console.log('blur');
      });
      
      $('#radio').on('change', function(){
        console.log('change');
      });
      

      JSFiddle

      【讨论】:

        猜你喜欢
        • 2013-08-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-02-13
        • 1970-01-01
        • 2020-06-22
        • 2017-08-04
        相关资源
        最近更新 更多