Question

到目前为止，这是我的代码，

$('label').click(function () {
        if ($('label input').is(':checked')) {
            $(this).addClass('checked');
            $('.donate-now label').not(this).removeClass('checked');

            var donateAmount = $(".checked input").val();
            $('p').append(donateAmount);
        }

    });

我正在检查以确保“donateAmount”变量只获取一个值，因此要测试，我将它附加到HTML，但它会显示两次。

这是append（）的函数，而我的变量只有一个值，或者是错误的吗？基本上我只是想确保我的变量有一个值。

这里有效，http://jsfiddle.net/YB8UW/15/

谢谢

Answer 1

尝试将选择器更改为：

$('label input').click(function () {
....
});

http://jsfiddle.net/YB8UW/18/

您的问题是，当您单击收音机时，您正在单击标签AND收音机。由于您单击子元素，因此事件将触发两次。如果您将选择器稍微聚焦一点，并且仅在单击单选按钮时捕获，它将仅触发一次。单击标签也会点击输入。

将其从追加更改为替换并不能解决问题，只需屏蔽它即可。

Answer 2

使用：

而不是追加

$('p').html(donateAmount);

Append每次都会在<p>元素中添加一个新元素，而不是替换它的内容。

Answer 3

在添加容器之前，您应该.empty()容器。：）

http://jsfiddle.net/droppedonjapan/YB8UW/29/

为什么你的活动被解雇两次，我不是百分百肯定，但我认为这可能是标签点击事件发生的方式。我很确定它被委托给您的无线电输入，然后触发另一个标签点击。

我还稍微更改了代码以减少嵌套/链接。如果能为您处理，请告诉我们！

jquery append（）发生了两次

3 个答案: