Question

我正在构建一个jQuery函数，允许用户向表单添加其他字段。表单有四个按钮，用于不同的捐赠值。当您单击其中一个时，它会生成相应的表单字段，并为其他捐赠添加一个选项。

由于某种原因，额外的捐赠按钮不起作用。按钮的代码完全相同，所以这对我没有意义。

这是HTML：

<h6>Donation Information</h6>
<p>
    <a class="button" data-value="500" href="#" style="margin-right:2px;">5" &ndash; $500</a>
    <a class="button" data-value="250" href="#" style="margin-right:2px;">4" &ndash; $250</a>
    <a class="button" data-value="100" href="#"  style="margin-right:2px;">3" &ndash; $100</a>
    <a class="button" data-value="50" href="#" style="padding-right:13px;">2.5" &ndash; $50</a>
</p>
<div id="donationTarget"></div>

这是jQuery：

$(".button").click(function(e) {
    e.preventDefault();
    if ($(this).hasClass("clicked")) {
        // do nothing
    } else if ($(this).hasClass("disabled")) {
        // do nothing
    } else {
        $(this).addClass("clicked");
        $(".button:not(.clicked)").addClass("disabled");
        var counter = $(".donation").length;
        var amount = $(this).attr("data-value");
        if (amount == 500) {
            var size = 5;
        } else if (amount == 250) {
            var size = 4;
        } else if (amount == 100) {
            var size = 3;
        } else if (amount == 50) {
            var size = 2.5;
        }
        $("#donationTarget").before("<div class=\"donation\"><input maxlength=\"60\" name=\"inscription" + counter + "\" placeholder=\"Inscription (60 character maximum)\" type=\"text\" /><p><strong>Color Preference (subject to availability):</strong></p><div class=\"half\"><input id=\"color-blue" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-blue" + counter + "\">Blue</label><div style=\"clear:both;\"></div><input id=\"color-orange" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-orange" + counter + "\">Orange</label><div style=\"clear:both;\"></div><input id=\"color-red" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-red" + counter + "\">Red</label><div style=\"clear:both;\"></div></div><!--/.half--><div class=\"half\"><input id=\"color-yellow" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-yellow" + counter + "\">Yellow</label><div style=\"clear:both;\"></div><input id=\"color-green" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-green" + counter + "\">Green</label><div style=\"clear:both;\"></div></div><!--/.half--><div style=\"clear:both;\"></div></div><br /><h6>Additional Donation</h6><p><a class=\"button\" data-value=\"500\" href=\"#\" style=\"margin-right:2px;\">5\" &ndash; $500</a><a class=\"button\" data-value=\"250\" href=\"#\" style=\"margin-right:2px;\">4\" &ndash; $250</a><a class=\"button\" data-value=\"100\" href=\"#\"  style=\"margin-right:2px;\">3\" &ndash; $100</a><a class=\"button\" data-value=\"50\" href=\"#\" style=\"padding-right:13px;\">2.5\" &ndash; $50</a></p>");
    }
});

另外，有没有办法在函数结束时清理jQuery的超长行？我无法弄清楚如何在不破坏脚本的情况下将HTML保留在多行上。

感谢。

jsFiddle：http://jsfiddle.net/aptwt/2/

Answer 1

对于动态添加的元素，您需要使用on函数的委托事件：

<强> HTML

<p id="button-container">
    <a class="button" data-value="500" href="#" style="margin-right:2px;">5" &ndash; $500</a>
    <a class="button" data-value="250" href="#" style="margin-right:2px;">4" &ndash; $250</a>
    <a class="button" data-value="100" href="#"  style="margin-right:2px;">3" &ndash; $100</a>
    <a class="button" data-value="50" href="#" style="padding-right:13px;">2.5" &ndash; $50</a>

</p>

<强>的jQuery

$(function() {
    $("#button-container").on('click', ".button", function(e) {
    ...
    });
});

Answer 2

这里的问题是这些新按钮没有附加事件监听器。当您编写$('.button').click(...)时，jQuery会通过onClick类将button事件侦听器附加到每个元素。但是，当发生这种情况时，页面上没有这些新元素。

所以，你必须在这里选择。一，您可以再次添加事件监听器，但这不是DRY或最佳。二，您可以将事件监听器附加到父元素，并使用jQuery.on()来利用事件冒泡，如下所示：

<p id="additional-donation"> /* ... */ </p>

$('#additional-donation').on('click', '.button', function(e) {
    var amount = $(e.target).data('value');
    /* ... */
});

编辑：看起来我在这里被击败了。至于关于更好格式化的其他问题，可以通过创建父元素，追加子元素以及将父元素插入页面来逐步构建元素。只需确保在JavaScript中完成所有工作，然后一步将整个内容插入到页面中。这样可以最大限度地减少DOM操作量。

var additional = $('div#additional-donation');
additional.append(/* ... */);
$('#donationTarget').before(additional);

功能因生成的按钮而中断

2 个答案: