0

ユーザーが追加のフィールドをフォームに追加できる jQuery 関数を作成しています。フォームには、さまざまな寄付額用の 4 つのボタンがあります。いずれかをクリックすると、適切なフォーム フィールドが生成され、追加の寄付のオプションが追加されます。

何らかの理由で、追加の寄付ボタンが機能しません。ボタンのコードはまったく同じなので、これは私には意味がありません。

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

0

ここでの問題は、これらの新しいボタンにイベント リスナーが関連付けられていないことです。を記述する$('.button').click(...)と、jQuery が通過し、クラスonClickを持つ各要素にイベント リスナーがアタッチされます。buttonただし、それが発生したとき、これらの新しい要素はページに存在しませんでした.

したがって、ここでオプションを選択する必要があります。1 つは、イベント リスナーを再度追加できることですが、これは DRY または最適ではありません。jQuery.on()2 つ目は、イベント リスナーを親要素にアタッチし、次のように使用してイベント バブリングを利用することです。

<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 に答える