CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
SpringLearner
SpringLearner

Reputation: 13854

clicking on the dynamically created edit button is not working

I have this jsfiddle in which there is a form which accepts name,email and mobile number.After pressing the add button new records are inserted below the add button along with 2 bootstrap icons edit and delete.So when clicked on edit button it should display column values(this only occurs for 1st 2 rows ) but when edit button is clicked on the newly created records then it does not display anything.Can I know where is the error?

this is the jquery code for edit button click

$('.icon-edit').click(function () {
      //alert("hi");
        $('#editReords').modal({show:true})
var $row = $(this).parents('tr');
var $columns = $row.find('td');
        //$columns.addClass('row-highlight');

        var values = "";
        jQuery.each($columns, function(i, item) {
            values =item.innerHTML;
            if(i==1){

                alert("name:"+values);
                //document.getElementById("name1").value = values;
            }
            else if(i==2){
                alert("emailID:"+values);
                //document.getElementById("date1").value = values;
            }
else if(i==3){
                alert("mobile:"+values);
                //document.getElementById("StartTime1").value = values;
            }});
    });
    $('#save').click(function () {
//alert("data saved");
    });
//edit records
    });

Upvotes: 0

Views: 168

Answers (3)

George
George

Reputation: 36794

Use on() to delegate the event, because the elements are added dynamically:

$('.icon-edit').click(function () {

Should become:

$("#mytable").on('click', '.icon-edit', function () {

JSFiddle

Note: You can also use delegate() for this:

$("#mytable").delegate('.icon-edit', 'click', function() {

JSFiddle

Upvotes: 3

Vahid Taghizadeh
Vahid Taghizadeh

Reputation: 997

Oh sry ! I had a mistake to code use this :

Try this code please :

$('#mytable').on('click','.icon-edit',function () {
      //alert("hi");
        $('#editReords').modal({show:true})
var $row = $(this).parents('tr');
var $columns = $row.find('td');
        //$columns.addClass('row-highlight');

        var values = "";
        jQuery.each($columns, function(i, item) {
            values =item.innerHTML;
            if(i==1){

                alert("name:"+values);
                //document.getElementById("name1").value = values;
            }
            else if(i==2){
                alert("emailID:"+values);
                //document.getElementById("date1").value = values;
            }
else if(i==3){
                alert("mobile:"+values);
                //document.getElementById("StartTime1").value = values;
            }});
    });
    $('#save').click(function () {
//alert("data saved");
    });
//edit records
    });

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Use .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

$('#mytable').on('click','.icon-edit',function () { ..//code here })

Syntax

$( elements ).on( events, selector, data, handler );

fiddle Demo

Upvotes: 3

Related Questions