Question

我已经创建了div这样的

<div id="hidden">
        <img src="photos/Close-2-icon.png" width="16" height="16">
        <input id="add" value="Add feild" type="button" >
        <input type='button' id='h_div_ok' value="check !" />
        <div id="inside_display" >
        </div>
        <input type="button"  value="Insert" id="btninser" >
    </div>

当点击添加按钮时，它将创建一个表格。这是<{p>的jquery

that.$("#add").click(function() {
        i++;
        var input = jQuery('<tr><td><input type=\"text\" id=\"input_'+i+'\"></td><td><textarea id=\"txtar_'+i+'\"></textarea></td><td><input type=\"button\" id=\"remove_'+i+'\" value=\"Remove\" /></td></tr>');
        if(i == 1){
            jQuery('#hidden').append('<table>');
            jQuery('#hidden table').append(input);
            jQuery('#hidden table').append('</table>');
        }else{
            jQuery('#hidden table tr:last').after(input);
        }
        $("#remove_" + i).click(function(){
            if(i == 1){
                $(this).closest("table").remove();
            }else{
                $(this).closest("tr").remove();
            }
        });

i是一个全局变量。然后单击btninser按钮后，它将生成一个动态创建的表代码的字符串。

$('#btninser').click(function(){
        $('#'+id).text(getval());
        $("#hidden table").remove();
    });
    function getval(){
        var htmlString = '<table>';
            var j;
            for(j=1; j<=i; j++){
                if($('#input_'+j).length === 0){

                }else{
                var itval = $('#input_'+j).val();
                var taval = $('#txtar_'+j).val();
                htmlString =htmlString + ('<tr><td>'+itval+'</td><td>'+taval+'</td></tr>');
                }
            }
            htmlString =htmlString + ('</table>');
        return htmlString;
    }

在这种情况下id也是一个全局变量，它只是textare的id。之后，如果我再次点击add按钮，那个事件没有解雇。我该如何解决这个问题？

Answer 1

在这里你应该选择“我 - ”它会使你的“我”算得正确，就像你用i ++做的那样。还需要这样做

$('#remove_'+i).click(function () {
            i--;
        });

您的代码

$(document).ready(function () {
    $("#add").click(function () {
        i++;
        var input = jQuery('<tr><td><input type=\"text\" id=\"input_' + i + '\"></td><td><textarea id=\"txtar_' + i + '\"></textarea></td><td><input type=\"button\" id=\"remove_' + i + '\" value=\"Remove\" /></td></tr>');
        if (i == 1) {
            jQuery('#hidden').append('<table>');
            jQuery('#hidden table').append(input);
            jQuery('#hidden table').append('</table>');
        } else {
            jQuery('#hidden table tr:last').after(input);
        }
        $("#remove_" + i).click(function () {
            if (i == 1) {
                $(this).closest("table").remove();
            } else {
                $(this).closest("tr").remove();
            }
        });

        $('#btninser').click(function () {
            $('#' + id).text(getval());
            $("#hidden table").remove();
        })

        **$('#remove_'+i).click(function () {
            i--;
        });**
    });
});


function getval() {
    alert("getval");
    var htmlString = '<table>';
    var j;
    for (j = 1; j <= i; j++) {
        if ($('#input_' + j).length === 0) {

        } else {
            var itval = $('#input_' + j).val();
            var taval = $('#txtar_' + j).val();
            htmlString = htmlString + ('<tr><td>' + itval + '</td><td>' + taval + '</td></tr>');
        }
    }
    htmlString = htmlString + ('</table>');
    return htmlString;
}

Answer 2

如果您的第二个代码块与代码中的代码块完全相同，那么#add事件处理程序将缺少其结束括号。另外，我不确定你在jquery选择器前做了什么that ..

that.$("#add").click(function() {
    i++;
    // .......

          }else{
            $(this).closest("tr").remove();
          }
    });

假设你的第二个事件处理程序是嵌套的，它应该是..

$("#add").click(function() {
    i++;
    // .......

          }else{
            $(this).closest("tr").remove();
          }
    });
});

Answer 3

我认为您需要重置i变量，以便在按下添加按钮（if (i == 1)）

时再次重绘您的表格

$('#btninser').click(function() {
    $('#' + id).text(getval());
    $("#hidden table").remove();
    i = 0; //here!
});

删除元素后，按钮单击不会触发

3 个答案: