Question

我使用javascript添加和删除输入字段。正确添加字段，保存和显示数据。但是当我单击从数据库生成的字段中的删除按钮时，它不会被删除。它将我带到页面顶部。但是，如果我点击add more fields，则会通过javascript生成新字段，并在点击其remove时将其删除。我哪里错了？

HTML和JAVASCRIPT

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>

</div>
<?php
// retrieve the user meta
$fb = get_user_meta($user->ID, 'business_sm_fb', false);
if (!empty($fb)) {
    ?>
    <?php foreach ($fb as $f_b) {
        ?>
        <?php foreach ($f_b as $val) { ?>
            <div><input type="text" name="sm_fb[]" type="text" class="regular-text" value="<?php echo $val; ?>" /><a href="#" class="remove_field">Remove</a></div>
        <?php
        }
    }
    ?>
<?php } else {
    ?>
    <div><input type="text" name="sm_fb[]" type="text" class="regular-text" /></div>
<?php } ?>

<script>
    $(document).ready(function () {
        var max_fields = 10; //maximum input boxes allowed
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div><input type="text" name="sm_fb[]" type="text" class="regular-text" /><a href="#" class="remove_field">Remove</a></div>'); //add input box
            }
        });

        $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });
</script>

Answer 1

该问题似乎与wrapper对象有关：

var wrapper = $(".input_fields_wrap");

在您的脚本中，您将click事件绑定到.remove_field对象内的所有wrapper项：

$(wrapper).on("click", ".remove_field", function (e) {
    ....
})

问题是.remove_field项是通过PHP在.input_fields_wrap div的外部上添加的，因此点击事件不起作用。

正如您在此处所见，.input_fields_wrap已打开，并在<button />后立即关闭。您的PHP代码会在此div之外添加输入。

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
</div>

要解决此问题，请在PHP代码块之后移动结束div标记。

使用javascript通过数据库动态填充时未删除输入字段

1 个答案: