Question

我想用jQuery中的append生成的类“inputF”清除输入值，

<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function () {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID

    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();

        $(wrapper).append('<div><input type="text" class="inputF" name="mytext[]"/>\n\
                <button name="remove" class="remove_field">x</button>\n\
                <button name="clear" class="clear_field">clear</button>\n\
                <input type="checkbox" class="check" group="check">\n\
              </div>'),
    });

});
</script>
<div class="input_fields_wrap">
<button class="add_field_button">+</button>
<button class="show_field_button">show all</button>

这对我没用，

    $(wrapper).on("click", ".clear_field", function () {
        $(this).find('.inputF').val('');
    });

写它的正确方法是什么？

Answer 1

虽然你的html结构看起来像

<div>
     <input type="text" class="inputF" name="mytext[]"/>
     <button name="remove" class="remove_field">x</button>
     <button name="clear" class="clear_field">clear</button>
     <input type="checkbox" class="check" group="check">
</div>

您需要使用.parent();

$(wrapper).on("click", ".clear_field", function () {
     $(this).parent('div').find('.inputF').val('');
});

或.closest();

$(wrapper).on("click", ".clear_field", function () {
     $(this).closest('div').find('.inputF').val('');
});

Answer 2

你有不正确的选择器来定位兄弟元素：

$(wrapper).delegate("click", ".clear_field", function () {
    $(this).closest('div').find('.inputF').val('');
});

Answer 3

只需替换：

$(this).find('.inputF').val('');

使用：

$(wrapper).find('.inputF').val('');

单击jquery时清除输入值

3 个答案: