单击时表单值消失

Question

我有一个带有 6 个单选按钮的问题，因此它们的编码为 1、2、3、4、5、99，还有一个文本框可以输入逐字回答。如果选择了代码 1-5，则文本框中的值将消失，如果选择了代码 99，则文本框中的答案将显示出来。

但是当我点击文本框编辑之前输入的逐字文本时，文本框中的所有文本都会消失，

文本框ID为：Q6_99_other

这是脚本：

var txt = "";
$('#fieldset_Q6 input').parent().each(function () {
    $(this).click(function () {
        //alert('checked');

        $('#Q6_99_other').on('keyup change', function () {
            txt = this.value;
        })

        var id = $(this).children().attr('id');
        if (id == 'Q6_1_99') {
            $('#Q6_99_other').val(txt);
        } else {
            $('#Q6_99_other').val('');
        }

    });
});

有人有什么建议吗？也许我需要修改脚本的“keyup change”部分？

非常感谢， 罗伊

Answer 1

单击文本框时，单击事件会冒泡到父元素。这将运行您编写的点击处理程序。由于孩子的ID不是Q6_1_99，所以执行$('#Q6_99_other').val('')，清除文本字段。

您可以通过以下方式防止这种冒泡：

$("#Q6_99_other").click(function(e) {
    e.stopPropagation();
    this.focus();
});

此外，您可能不应该在单击处理程序中使用 keyup change 绑定。这意味着每次用户单击父级时，它都会在文本框上绑定另一个keyup change 处理程序。你只需要这样做一次，而不是每次点击。只需在顶级 document.ready 处理程序中执行即可。

您也不需要使用.each() 将处理程序绑定到所有元素。事件绑定函数可以应用于集合，jQuery 会自动对其进行迭代。