CODEWITHSUNDEEP
javascriptjqueryhtml
Harshana
Harshana

Reputation: 23

Button click not fire after remove element

I have create a div like this 

<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>

and when click the add button it will create a table. This is the jquery for 

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 is a global variable. Then after click the btninser button it will generate a string of the dynamically created table code. 

$('#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;
    }

in this case id also a global variable and it is just a id of a textare. after that if i click add button again that event not firing. How can i solve this ?

Upvotes: 0

Views: 93

Answers (3)

Vivek Malik
Vivek Malik

Reputation: 165

Here you should go with "i--" it make ur "i" count correct ,same as u done with i++. also need to do this 

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

Your code 

$(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;
}

Upvotes: 1

Volvox
Volvox

Reputation: 1649

I think you need to reset i variable so your table will be redrawn again when pressing add button (if (i == 1))

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

Upvotes: 0

DevDonkey
DevDonkey

Reputation: 4880

if your 2nd code block is exactly how you have it in your code, then your #add event handler is missing its end close brackets. Also, Im not sure what you have that doing in front of the jquery selector..

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

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

assuming your 2nd event handler is intended to be nested, it should be..

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

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

Upvotes: 0

Related Questions