1

リンクがjQuery経由でクリックされたときに新しいHTMLフォーム要素を作成する小さなスクリプトがあります。

Javascript

var counterx = 2;
var counter = 2;

$(document).ready(function(){
    $("#addMoreRcpt").click(function(){
        if (counterx>10){
            alert("Only 10 reciepients are allowed");
            return false;
        }

        var newTextBoxTr = $(document.createElement('tr')).attr("id", 'RcptEml_' + counter);
        newTextBoxTr.append("<td><input type="button" id="txtRcptID_'+ counter + '"></td><td><input type="button" value="Search" id="SearchItem_'+ counter + '">
        </td>");

        newTextBoxTr.appendTo("#RcptGroup");
        counter++;
        counterx++;
    });
});

HTML

<table border=1>
<div id="RcptGroup">
<tr>
    <th>1</th>
    <th>2</th>
</tr>
<div id="1">
<tr>
    <td><input type="text"></td>
    <td><input type="button" value="Search" id="SearchItem_1"></td>
</tr>
</div>
</div>
</table>
<br /><a id="addMoreRcpt" href="#" >Add row</a>

新しく作成された HTML フォームごとに、「検索ボタン」が適切に機能するように、新しい jQuery イベントを作成する必要があります。検索ボタンのjQueryは次のとおりです。

$("#searchItem_1").on('click', function() {
    $("#bg").fadeIn(400, function() {
            $("#modal").fadeIn(400);
        });
    });
    $("#modal img").on('click', function() {
        var text = $(this).siblings('.descr').text();
        $("#modal").fadeOut(400, function() {
                $("#bg").fadeOut(400, function() {
                    $("#txtRcptID_1").val(text);    
            });
        });
    });

上記のスクリプトは、id txtRcptID_ID の search_Item_1 ボタンとテキストボックスを参照しています。私が達成する必要があるのは、「行の追加」ボタンがクリックされるたびに上記のスクリプトを作成することです。

ただし、新しい要素が作成されたときのカウンター番号に対応する、seatchItem_# と txtRcpt_# も正しい必要があります。

例: [行の追加] をクリックし、カウンターが現在 3 の場合、スクリプトは id="txtRcptID_3" で新しい要素を追加し、次のように始まる新しい jQuery イベントを作成します $("#searchItem_3").on('click' 、 関数（） {

私は試行錯誤しましたが、成功しませんでした。誰でも助けることができますか？

編集 **

次のコードを追加して、かなり近づいたのですが、モーダル ウィンドウからテキスト フィールドに値を追加する際にまだ問題があります。カウンターの値を確認するアラート機能を追加しましたが、検索ボタンをクリックすると不思議なことに 1 増加します。

newTextBoxRow.appendTo("#RcptGroup");
newTextBoxRow1.appendTo("#RcptGroup");
alert("ID number:"+counter);

$("#searchItem_"+counter).on('click', function(ev){
    $("#bg").fadeIn(400, function() {
        $("#modal").fadeIn(400);
    });
    alert("ID number:"+counter);
});

$("#modal img").on('click', function(ev) {
    var text = $(this).siblings('.descr').text();
    $("#modal").fadeOut(400, function() {
        $("#bg").fadeOut(400, function() {
             $("#txtRcptID_"+counter).val(text);    
         });
    });
});

counter++;
counterx++;

編集2 **

これが別の試みです。検索テキストフィールドのidを「txt_searchItem_'+カウンター+'」に変更しました。そして、このコードを追加しました。それは機能しますが、それでも問題があります。画像をクリックすると、モーダル ウィンドウをトリガーしたテキスト フィールドだけでなく、すべてのテキスト フィールドが更新されます。

$(document).on('click', '.searchItemBtn', function(ev){
    var getID = $(this).attr("id");
    alert("ID number:"+getID);
        $("#bg").fadeIn(400, function() {
               $("#modal").fadeIn(400);
        });
         $(document).on('click', '#modal img', function(ev
            var text = $(this).siblings('.descr').text();
            $("#modal").fadeOut(400, function() {
                $("#bg").fadeOut(400, function() {
                    $("#txt_"+getID).val(text);    
                });
            });
        });
 });
4

1 に答える 1

7

動的に作成された要素にハンドラーをアタッチするonメソッドを作成する場合は、次のように使用する必要があります。

$(parent_selector).on('click', child_selector, function(ev){
    // do stuff on click
});

したがって、あなたの場合、idのほかに、作成しているボタンにクラスを追加します。

newTextBoxTr.append('<td><input type="button" id="txtRcptID_'+ counter + '"></td><td><input type="button" value="Search" class="button_class" id="SearchItem_'+ counter + '">');

そして、次のようにハンドラーをアタッチします。

$(document).on('click', '.button_class', function(ev){
    // do stuff
});
于 2012-08-13T08:17:47.757 に答える