0

ユーザーが必要とする頻度で動的フォーム フィールドを作成する必要があるページがあり、Ajax を使用してそれをデータベースに結びつけ、フォームへの入力を高速化し、ユーザーの入力ミスを防止しようとしています。

そのため、Ajax から返されたデータをポップアップ div に配置し、ユーザーが選択すると、フォーム フィールドが入力されます。問題は、複製されたフィールドに発生します。フォーカスされたときにポップアップ div を表示したくないようです。それらがDOMに作成/追加されたときに関係があると思います。

クローンを作成するJSは次のとおりです。

$(document).ready(function() {
    var regex = /^(.*)(\d)+$/i;
    var cloneIndex = $(".clonedInput").length;

    $("button.clone").live("click", function(){
        $(this).parents(".clonedInput").clone()
            .appendTo("#course_container")
            .attr("id", "clonedInput" +  cloneIndex)
            .find("*").each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex);
                }
        });
        cloneIndex++;
        numClones=cloneIndex-1;
        //alert("numClones "+numClones);
    });

ここで、正しい複製されたフィールドにフォーカスしてポップアップを呼び出すことができると期待しています。baker_equiv0 id はオリジナル コードですが、baker_equiv1 は最初のクローンです。

$('#baker_equiv0').focus(function() { \\ THIS CODE WORKS
$('.popup').fadeIn(500);
$('#results').empty();
// document.enter_data.baker_equiv1.value="test"; THIS LINE WORKS
//alert("numClones "+numClones);
                }); 

$('#baker_equiv1').focus(function() { // THIS DOESN'T EVER FIRE
alert("numClones "+numClones);
$('.popup').fadeIn(500);
$('#results').empty();
});

フォームを含む HTML は次のとおりです。

<label for="baker_equiv" class="">Baker Equivalent: <span class="requiredField">*</span></label>
<input type="text" class="cinputsa" name="baker_equiv[]" id="baker_equiv0" size="8" ONKEYUP="get_equiv(this.value);">

これを上記の HTML コードに入れると、問題なく動作します。onfocus="alert(this.id)"

また、可能性のあるフィールド クローンの各セット、つまり、baker_equiv0、​​baker_equiv1 などではなく、baker_equiv[] のコードをコピーするのではなく、作成された id 配列に基づいて機能するように JS コードを調整する方法にも興味があります。

皆さんありがとう！

4

1 に答える 1

2

HTMLについていくつかの仮定をした後、私はこれを思いついた：

HTML：

<div id="course_container">
    <div class="cloneMe"><!-- wrapper could be any block or inline element eg. <span> or <form> -->
        <label for="input0">Baker Equivalent: <span class="requiredField">*</span></label>
        <input id="input0" type="text" class="cinputsa needsPopup" name="baker_equiv[]" size="8" />
        <button class="clone">Clone</button>
    </div>
</div>

Javascript：

$(function() {
    //*** fixed data ***
    var $$ = { //cache of jQuery objects
            course_container: $("#course_container"),
            popup : $("#popup"), //presumably only one popup, so it gets an id
            results: $("#results")
        },
        cloneIndex = 0, // adjust as required to reflect highest index used in the initial HTML
        input_id_prefix = 'input';

    //*** event handlers ***
    $$.course_container.on('click', 'button.clone', function() {
        var $clone = $(this).closest('.cloneMe').clone(true, true),
            id = input_id_prefix + ++cloneIndex;
        $clone.find('input').attr('id', id).end().find('label').attr('for', id).end().appendTo($$.course_container);
    });
    $$.course_container.on('focus', 'input.needsPopup', function() {
        $$.popup.fadeIn(500);
        $$.results.empty();
    }).on('keyup', get_equiv);
});

デモ

ノート

  • clone(true,true)データとイベントの深いクローン。
  • IDの生成が簡素化されます。
  • <label for="...">入力フィールドには、噛み付くためのIDが必要です。ラベルの機能なしで実行できる場合はfor、IDの必要性を完全に回避する必要があります。
  • クローンボタンのクリックと入力フィールドのキーアップおよび入力フィールドのフォーカスの処理はに委任され#course_containerます。
  • get_equiv()は名前で添付されており、デモには、呼び出されたことを示す簡単なダミーステートメントがあります。
于 2012-09-02T03:37:14.170 に答える