最近在开发中遇到了一个 jQuery Label 无法赋值的问题,一直以为是代码问题,经过多方排查后,发现是由于 jQuery Label 插件存在一些逻辑上的缺陷导致的。
具体来说,jQuery Label 插件将 input 元素和 label 元素关联,以达到模拟表单元素的效果。但在某些情况下,比如在使用 Ajax 动态加载表单数据时,会遇到无法为 jQuery Label 赋值的情况。
经过分析,发现 jQuery Label 插件将 input 元素的值赋值给了 label 元素的 innerHTML 属性,而在动态加载表单数据时,input 元素的值是在 DOM 加载完成后才赋值的,而 label 元素却在 DOM 加载完成后就已经完成了关联,因此无法赋值。
$(function() { // 关联 input 元素和 label 元素 $("input").labelify(); // 动态加载表单数据 $.ajax({ url: "/api/formdata", success: function(data) { $("input[name='username']").val(data.username); $("input[name='password']").val(data.password); // 无法为 label 赋值 $("label[for='username']").text(data.username); $("label[for='password']").text(data.password); } }); });
解决此问题的方法有很多种,比如在动态加载表单数据后重新关联 input 元素和 label 元素,或者直接修改 label 元素的属性。
$(function() { // 关联 input 元素和 label 元素 $("input").labelify(); // 动态加载表单数据 $.ajax({ url: "/api/formdata", success: function(data) { $("input[name='username']").val(data.username); $("input[name='password']").val(data.password); // 重新关联 input 元素和 label 元素 $.labelify.update(); // 或者直接修改 label 元素的属性 $("label[for='username']").attr("data-label", data.username); $("label[for='password']").attr("data-label", data.password); } }); });
总之,在使用 jQuery Label 插件时,需要注意这个插件的一些逻辑上的缺陷,以避免出现一些不必要的问题。
查看更多关于jquery label 无法赋值的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did248181