调用jQuery iconpicker后链式调用append报Uncaught TypeError如何解决

报错根因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'append')报错，是因为iconpicker()方法调用后没有返回原jQuery对象，导致后续链式调用append()时，前置操作的返回值为undefined，无法读取append方法。

另外补充：<input>属于单标签表单元素，本身不支持嵌套子元素，你使用append()给input追加子元素的逻辑本身不符合DOM规范。如果是要修改input的输入值，应该使用val()方法；如果是要在input后方追加<p>Test</p>元素，单独操作DOM即可。

修正后代码 #

JS逻辑 #

$(document).ready(function(){
    // 先单独初始化input1的iconpicker，避免链式调用
    $('.input1').iconpicker(".input1");
    // 修改input1的输入值，替换为你需要的内容即可
    $('.input1').val("自定义输入值");
    // 若确实需要在input1后方追加p元素，用insertAfter实现
    $("<p>Test</p>").insertAfter('.input1');

    // 其余两个输入框的iconpicker初始化不变
    $('#inputid2').iconpicker("#inputid2");
    $('.input3').iconpicker(".input3");

    // 若需要选中图标时同步更新对应输入框的值，绑定iconpicker的选中事件即可
    $('.input1, #inputid2, .input3').on('iconpickerSelected', function(e) {
        $(this).val(e.iconpickerValue);
    });
});

HTML结构无需调整 #

<input type="text" class="input1 input"/>
<br/><br/>
<h4>Value == Amazon</h4>
<input type="text" class="input" id="inputid2" value="fa-amazon"/>
<br/><br/>
<h4>Just for fun</h4>
<input type="text" class="input3 input"/>
<br/><br/>

内容的提问来源于stack exchange，提问作者attack-to-overflow