jQuery TypeError: $(...).val(...) 为空

     2023-03-14     161

关键词:

【中文标题】jQuery TypeError: $(...).val(...) 为空【英文标题】:jQuery TypeError: $(...).val(...) is null 【发布时间】:2018-07-04 01:48:03 【问题描述】:

我似乎无法找到我的代码中的缺陷。我将 select2 用于我的选择列表,并且右侧有一个按钮,单击该按钮时会执行以下脚本:

<script type="text/javascript">
function clearBiller() 
    $('#bill_to').val('').trigger('change');

</script>

但是当点击时,我收到了引用此脚本的TypeError: $(...).val(...) is null 错误:

<script>
$(document).ready(function()
    $('#bill_to').on('change', function() 
      if ($(this).val() == '')
      
        $("#biller").show();
      
      else
      
        $("#biller").hide();
      
    );
    );
</script>

这个问题存在于第二个函数中,我只是不确定如何解决。目前这是表单那部分的html:

<select id="bill_to" name="bill_to" class="js-example-basic-single form-control">
                    @if($shipment->bill_to)
                        <option value="$shipment->bill_to" selected>3</option>
                    @endif

                    @foreach($cCustomers as $customer)
                        <option value="$customer->id">$customer->customer_name</option>
                    @endforeach
                </select>
                <img src="/images/clear.png"   style="margin-left: 5px;" onclick="clearBiller()">
                <div id="existing_biller_details" class="hidden" name="existing_biller_details" style="margin-top:10px;">
                </div>

谁能发现什么?

更新

根据下面对我来说效果最好的建议,我的脚本现在看起来像这样:

    $(document).ready(function() 
        if ($('.js-example-basic-single').val() == "") 
                $('#biller').addClass('hidden');
                $('#existing_biller_details').removeClass('hidden');
        

        var $eventSelect = $("#bill_to");
            $eventSelect.select2();
            $eventSelect.on("select2:select", function (e) 
          if ($eventSelect.select2().val() == '')
          
                $('#biller').removeClass('hidden');
              $('#existing_biller_details').addClass('hidden');
                          alert('cleared');
          
          else
          
                $('#biller').addClass('hidden');
              $('#existing_biller_details').removeClass('hidden');
              alert('not cleared');
          
    );

);

上面的警报仅用于指导我解决哪些问题。目前,我加载了已将 ID 为“existing_biller_details”的 div 设置为已隐藏的页面,但如果在 select2 中选择了一个值,则会删除“隐藏”类。

我目前的问题是使用上面的代码,只有“else”才能完全工作。如果我通过最初的“if”语句,它只会执行$('#biller').removeClass('hidden'),然后它就不能再进一步了。我在控制台中没有看到任何错误,但没有出现警报,并且命令 $('#existing_biller_details').addClass('hidden') 也不起作用。

【问题讨论】:

检查 Select2 文档。它有自己的事件。 好吧,这适用于select2,我上面指定的错误是引用第二个函数。 实际上是 $ jQuery,因为它不应该返回 null .... 好的,检查我的答案,但这不会有太大帮助。仍然需要检查 Select2 API。 【参考方案1】:

您应该直接在#bill_to上触发更改事件

$('#bill_to').val('');
$('#bill_to').trigger('change');

但是您应该检查 Select2 文档,因为当 Select2 初始化并且 Select2 有自己的一组更改事件等时,您的主选择会被隐藏。

【讨论】:

【参考方案2】:

也许对你有帮助

var $eventSelect = $("#bill_to");
    $eventSelect.select2();
    $eventSelect.on("select2:select", function (e) 
          if ($eventSelect.select2().val() == '')
          
            $("#biller").show();
          
          else
          
            $("#biller").hide();
          
    );

【讨论】:

看我上面的更新(几分钟后),你的效果最好,但我写这篇文章的方式肯定有缺陷。

TypeError: $(...).slider 不是函数

】TypeError:$(...).slider不是函数【英文标题】:TypeError:$(...).sliderisnotafunction【发布时间】:2014-11-2008:05:49【问题描述】:是否存在依赖于服务器的jquery滑块?我正在为jquery范围滑块使用jquery库和Ui。只有一个jquery库,所以我认为任... 查看详情

TypeError jQuery offset().top 未定义

】TypeErrorjQueryoffset().top未定义【英文标题】:TypeErrorjQueryoffset().topisundefined【发布时间】:2014-02-2323:59:24【问题描述】:Firefox调试器显示jQuery函数的TypeError,该函数旨在在用户滚动并同时更新类时将导航栏粘贴到页面顶部。函数... 查看详情

jQuery 修复“未捕获的 TypeError:$ 不是函数”错误 [重复]

】jQuery修复“未捕获的TypeError:$不是函数”错误[重复]【英文标题】:jQueryfixfor"UncaughtTypeError:$isnotafunction"error[duplicate]【发布时间】:2016-01-2114:01:46【问题描述】:我的代码:<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery... 查看详情

JQuery UI'可拖动不是函数'未捕获的TypeError

】JQueryUI\\\'可拖动不是函数\\\'未捕获的TypeError【英文标题】:JQueryUI\'draggableisnotafunction\'UncaughtTypeErrorJQueryUI\'可拖动不是函数\'未捕获的TypeError【发布时间】:2021-10-0912:54:50【问题描述】:我正在尝试在表中的行上使用可拖动的J... 查看详情

JQuery DataTables 插件:TypeError:e[j] 未定义

】JQueryDataTables插件:TypeError:e[j]未定义【英文标题】:JQueryDataTablesPlugin:TypeError:e[j]isundefined【发布时间】:2014-08-2523:25:22【问题描述】:我不明白为什么DataTables在FF中抛出这个错误:TypeError:e[j]isundefined在IE中报告为:无法获取... 查看详情

jQuery DataTables 错误 - TypeError:无法读取未定义的属性“fnInit”

】jQueryDataTables错误-TypeError:无法读取未定义的属性“fnInit”【英文标题】:jQueryDataTableserror-TypeError:Cannotreadproperty\'fnInit\'ofundefined【发布时间】:2014-08-0607:36:48【问题描述】:我收到此错误:未捕获的类型错误:无法读取未定... 查看详情

JS/jQuery TypeError: jQuery(...).datepicker 不是函数

】JS/jQueryTypeError:jQuery(...).datepicker不是函数【英文标题】:JS/jQueryTypeError:jQuery(...).datepickerisnotafunction【发布时间】:2013-08-2507:43:47【问题描述】:这两天我一直在摸不着头脑,我很确定我只是错过了一些简单的东西,但我一生都... 查看详情

尝试使用 jQuery 获取 JSON 数据时出现 TypeError

】尝试使用jQuery获取JSON数据时出现TypeError【英文标题】:TypeErrorwhentryingtofetchJSONdatausingjQuery【发布时间】:2021-12-1307:16:34【问题描述】:所以我正在尝试使用此代码从此链接https://covid.ourworldindata.org/data/owid-covid-data.json获取JSON数... 查看详情

TypeError:使用 jQuery 数据表库时未定义 oColumn

】TypeError:使用jQuery数据表库时未定义oColumn【英文标题】:TypeError:oColumnisundefinedWhenUsingjQueryDatatablesLibrary【发布时间】:2012-08-3003:23:18【问题描述】:我在让jQueryDatatables库正确显示在我的Joomla网站表上时遇到问题。http://datatable... 查看详情

jQuery TypeError: $(...).val(...) 为空

】jQueryTypeError:$(...).val(...)为空【英文标题】:jQueryTypeError:$(...).val(...)isnull【发布时间】:2018-07-0401:48:03【问题描述】:我似乎无法找到我的代码中的缺陷。我将select2用于我的选择列表,并且右侧有一个按钮,单击该按钮时会执... 查看详情

jQuery Post blob 对象给出 Uncaught TypeError: Illegal invocation

】jQueryPostblob对象给出UncaughtTypeError:Illegalinvocation【英文标题】:jQueryPostblobobjectgivesUncaughtTypeError:Illegalinvocation【发布时间】:2016-06-2216:44:53【问题描述】:我正在尝试使用jQuerypost发布文件,并获取TypeError:IllegalinvocationfunctionfbUpl... 查看详情

jQuery $.ajax 和 jQuery UI 对话框:未捕获的 TypeError:非法调用?

】jQuery$.ajax和jQueryUI对话框:未捕获的TypeError:非法调用?【英文标题】:jQuery$.ajaxandjQueryUIdialog:UncaughtTypeError:Illegalinvocation?【发布时间】:2017-11-0320:13:58【问题描述】:当我单击jQueryUI对话框Save按钮时,我正在尝试发送AJAX请求... 查看详情

Worklight - 带有 jquery 1.10.2 的 jquery mobile 1.3.1 - TypeError: $.mobile 未定义

】Worklight-带有jquery1.10.2的jquerymobile1.3.1-TypeError:$.mobile未定义【英文标题】:Worklight-jquerymobile1.3.1withjquery1.10.2-TypeError:$.mobileisundefined【发布时间】:2013-11-1908:25:46【问题描述】:我的设置是Worklight6.0.0.1、Jquerymobile1.3.1和jqu 查看详情

想要使用 Datatable jQuery 函数获取页码,但它会生成 Typeerror

】想要使用DatatablejQuery函数获取页码,但它会生成Typeerror【英文标题】:WanttogetPagenumberusingDatatablejQueryfunctionbutitgenerateTypeerror【发布时间】:2018-10-1202:37:07【问题描述】://Pagenumberofdatatablevartable=$(\'#example1\').DataTable();varinfo=ta 查看详情

jQuery Datatables 错误(未捕获的 TypeError:$ 不是函数)

】jQueryDatatables错误(未捕获的TypeError:$不是函数)【英文标题】:jQueryDatatableserror(UncaughtTypeError:$isnotafunction)【发布时间】:2021-05-0122:12:38【问题描述】:我正在尝试让数据表适用于基本表这是我的错误下面是我的布局文件,... 查看详情

jQuery 中的 Uncaught TypeError 是不是来自代码冲突?

】jQuery中的UncaughtTypeError是不是来自代码冲突?【英文标题】:DoesanUncaughtTypeErrorinjQuerycomefromcodeconflict?jQuery中的UncaughtTypeError是否来自代码冲突?【发布时间】:2011-06-0506:01:53【问题描述】:Tumblr的loginpage是许多人的灵感来源,... 查看详情

JCrop 与 React 使用自定义脚本加载 jquery 对象:TypeError:a 未定义

】JCrop与React使用自定义脚本加载jquery对象:TypeError:a未定义【英文标题】:JCropwithReactusingcustomscripttoloadthejqueryObject:TypeError:aisundefined【发布时间】:2017-07-1309:30:17【问题描述】:我已提出以下申请:https://github.com/pc-magas/reaqct-jc... 查看详情

Angular 2 从 Jquery 调用 Typescript 函数会导致未捕获的 TypeError

】Angular2从Jquery调用Typescript函数会导致未捕获的TypeError【英文标题】:Angular2callingaTypescriptfunctionfromJquerycausesuncaughtTypeError【发布时间】:2016-09-0414:19:31【问题描述】:我有一个带有输入文本字段的组件,我使用JQuery附加了一个... 查看详情