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);    
            });
        });
    });

你看，上面的脚本引用了search_Item_1 按钮和id 为txtRcptID_ID 的文本框。我需要完成的是每次单击“添加行”按钮时创建上面的脚本。

但它还需要有正确的 seachItem_# 和 txtRcpt_# 对应于创建新元素时的计数器编号。

例如：当我单击 Add Row 时，计数器当前为 3，然后脚本添加 id="txtRcptID_3" 的新元素并创建一个新的 jQuery 事件，如下所示 $("#searchItem_3").on('click' ， 功能（） {

我已经尝试过，尝试过，但没有成功。任何人都可以帮忙吗？

编辑 **

我添加了以下代码并且非常接近，但是将模式窗口中的值添加到文本字段中仍然存在问题。我添加了一个警报功能来查看计数器的值，但是单击搜索按钮时它神秘地增加了一个：

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_'+ counter +'”。并添加了此代码。它起作用了，但仍然是一个问题。单击图像时，它会更新所有文本字段，而不仅仅是触发模式窗口的文本字段。

$(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 回答