未捕获的类型错误：在输入单击时无法读取 null 的属性“样式”

Posted 2023-05-09

【中文标题】未捕获的类型错误：在输入单击时无法读取 null 的属性“样式”

【英文标题】：Uncaught TypeError: Cannot read property 'style' of null on Input click

【发布时间】：2021-08-03 20:31:36

【问题描述】：

我在下面提供了这个 DIV，基本上我试图通过单击按钮在它下面附加类似的行。由于我的行包含输入标签，所以当我单击附加的 div 输入框时，会出现错误

未捕获的类型错误：无法读取输入的 null 属性“样式”

            <tbody class="tableBody">
                <tr class="p-2" id="row-item">
                    <td id="modelName">
                        <div class="form-outline search-box">
                            <input type="text" id="form1" class="form-control" name="modelName[]" required />
                            <label class="form-label" for="form1">Model Name</label>
                            <div class="result"></div>
                        </div>
                    </td>
                    <td id="quntity">
                        <div class="form-outline">
                            <input type="number" min="1" id="qty" name="qty[]" class="form-control" required
                                autocomplete="off" />
                            <label class="form-label" for="qty">Quantity</label>
                        </div>
                    </td>
                    <td id="price-total" class="priceTotal">
                        <div class="form-outline">
                            <input type="number" id="totalprice" readonly name="totalprice[]" class="form-control"
                                required autocomplete="off" />
                            <input style="display: none;" type="number" name="category[]" id="category" value="" />
                        </div>
                    </td>
                    <td></td>
                </tr>
            </tbody>
            <tr>
                <td><button class="btn btn-secondary add-row">+</button></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

JS代码是

$(document).ready(function() 
    var add_button = $(".add-row"); //Add button ID

    var max_fields = 200; //maximum input boxes allowed
    var wrapper = $("#row-item"); //Fields wrapper
    //Content to clone
    var clone_content =
        '<tr class="p-2" id="row-item"> <td id="modelName"> <div class="form-outline search-box"> <input type="text" id="form1" class="form-control" name="modelName[]" required /> <label class="form-label"for="form1">Model Name</label><div class="result"></div></div></td><td id="quntity"><div class="form-outline"><input type="number"min="1"id="qty"name="qty[]"class="form-control"required autocomplete="off"/><label class="form-label"for="qty">Quantity</label></div></td><td id="price-total"class="priceTotal"><div class="form-outline"><input type="number"id="totalprice"readonly name="totalprice[]"class="form-control"required autocomplete="off"/><input style="display: none;"type="number"name="category[]"id="category"value=""/></div></td><td><button id="close">X</button></td></tr>';
    var x = 1; //initlal text box count

    $(add_button).on('click', function()  //on add input button click
        $('.tableBody').append(clone_content);
    );
      

变量clone_content 包含我要再次添加的 div 代码。

The Red Circle is the original Table row and yellow highlighted is the div which was added via js. But i don't know why it is missing borders of the input and when I click on the input box the error is shown in the console.log

【问题讨论】：

我没有收到您的代码错误

和@JohnTyner 一样，你是不是想在你的 JS 文件的任何地方改变 html 元素的样式？

@thursday_dan 是的，我在最后一行添加了一个按钮。但我也尝试保持相同的 HTML 仍然显示错误。

@Kinglish 一旦你点击了通过JS添加的输入框，那么控制台就会出现错误。

您试图在代码中的哪个位置访问元素的样式？除非我错过了，否则我在您发布的示例中看不到 style 属性？

【参考方案1】：

错误是由于我使用的 CSS 框架造成的。如果我删除 CDN，它会完全正常工作。我不知道为什么会这样，但它现在可以工作了。

任何人都知道为什么让我知道。

【讨论】：

我已将样式表添加到 codepen here。我会检查您的加载顺序并确保您的所有引导程序组件都正确加载。