Jquery 使用生成的按钮中断函数_Jquery

Jquery 使用生成的按钮中断函数

jquery

Jquery 使用生成的按钮中断函数,jquery,Jquery,我正在构建一个jQuery函数，允许用户向表单中添加其他字段。表单有四个按钮，用于不同的捐赠值。当您单击其中一个时，它将生成相应的表单字段，并为其他捐赠添加一个选项出于某种原因，额外的捐赠按钮不起作用。按钮的代码完全相同，所以这对我来说毫无意义以下是HTML： <h6>Donation Information</h6> <p> <a class="button" data-value="500" href="#" style="margin-

我正在构建一个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>");
    }
});

$（“.button”）。单击（函数（e）{
e、 预防默认值（）；
if（$（this）.hasClass（“单击”））{
//无所事事
}else if（$（this）.hasClass（“已禁用”））{
//无所事事
}否则{
$（此）.addClass（“单击”）；
$（“.button:未（.clicked）”）.addClass（“已禁用”）；
变量计数器=$（“.generation”）.length；
var金额=$（此）.attr（“数据值”）；
如果（金额=500）{
变量大小=5；
}否则，如果（金额=250）{
变量大小=4；
}否则，如果（金额=100）{
变量大小=3；
}否则，如果（金额=50）{
变量大小=2.5；
}
美元（“#捐赠目标”）。之前（“颜色偏好（视可用性而定）：蓝橙红蓝绿色
额外捐赠”；
}
});

还有，有没有办法在函数末尾清理jQuery的超长行？我不知道如何在不破坏脚本的情况下将HTML保持在多行上

谢谢

jsiddle:

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

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>

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

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>

这里的问题是这些新按钮没有附加事件侦听器。当您编写

$（'.button'）。单击（…）

时，jQuery通过

按钮将onClick
事件侦听器附加到每个元素上。然而，发生这种情况时，这些新元素并未出现在页面上
所以，你必须在这里选择。第一，您可以再次添加事件侦听器，但这不是干巴巴的或最佳的。第二，您可以将事件侦听器附加到父元素，并使用jQuery.on（）
利用事件冒泡，如下所示：
<p id="additional-donation"> /* ... */ </p>

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

这里的问题是这些新按钮没有附加事件侦听器。当您编写$（'.button'）。单击（…）
时，jQuery通过按钮将onClick
事件侦听器附加到每个元素上。然而，发生这种情况时，这些新元素并未出现在页面上
所以，你必须在这里选择。第一，您可以再次添加事件侦听器，但这不是干巴巴的或最佳的。第二，您可以将事件侦听器附加到父元素，并使用jQuery.on（）
利用事件冒泡，如下所示：
<p id="additional-donation"> /* ... */ </p>

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

谢谢有道理，只是我不知道。我在文章末尾的问题是什么？我有没有办法将jQuery的超长行转换成多行？我不这么认为，不过你可以利用双引号和单引号的混合，这样你就不必逃避双引号了。如果您希望格式化字符串，使其看起来更像HTML，那么它的可读性也会更高。谢谢有道理，只是我不知道。我在文章末尾的问题是什么？我有没有办法将jQuery的超长行转换成多行？我不这么认为，不过你可以利用双引号和单引号的混合，这样你就不必逃避双引号了。如果您希望格式化字符串，使其看起来更像HTML，那么它的可读性也会更高。