0

我正在构建一个 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/

4

2 回答 2

4

对于动态添加的元素，您需要将委托事件与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) {
    ...
    });
});
于 2013-06-11T18:18:28.020 回答
0

这里的问题是这些新按钮没有附加事件侦听器。当您编写 时$('.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);
于 2013-06-11T18:28:58.030 回答