Binding the click event of a row with jQuery

Question

I am creating a demo in which button clicks trigger the creation of rows. I want to edit the row\'s text when I click the generated row \"it generate another row inside containe

Answer 1

Working example: http://jsfiddle.net/Gajotres/k7zJ4/5/

HTML:

    
        
        
         
    
         
        

            

                

                    First Page
                
                Next
            

            

                


                
                
                
                

                    Close
                    

                        Text Case ID:
                        
                    
                    Done
                
                
            

            


            
        
  
    
   

JavaScript:

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#addTestCase', function (e) {     
        $("#testCaseId").popup("open");
        //createTestCase("trdt",false,null);
    });
    $(document).on('click', '#donePopUp', function (e) {     
        $("#testCaseId").popup("close")
    });    
    $( "#testCaseId" ).on({
        popupafterclose: function() {
            if($('#testCaseIDValue').val().length > 0) {
                createTestCase($('#testCaseIDValue').val(),false,null);
            }
        }
    });    
});

function createTestCase(testCaseName,iscreatedFromScript,jsonObject) {
    var id;
    if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
        id = "tc_1";
    } else {
        id = $("#testCaseContainer li:last").attr('id');
        var index = id.indexOf("_");
        var count = id.substring(index + 1, id.length);
        count = parseInt(count);
        id = id.substring(0, index) + "_" + parseInt(count + 1);
    }
    var html = '
' + '
' + '
' + testCaseName + 'edit
' + '
' + '
';
    $('#testCaseContainer').append(html);

    var elem = document.getElementById('testCaseContainer'); // just to scroll down the line
    elem.scrollTop = elem.scrollHeight;

}
$(document).on('click', '.clickTestCaseRow', function (e) {
    var clickId=this.id;
    e.stopPropagation();
});

$(document).on('click', '.clickTestCaseRow', function (e) {
    var clickId=this.id;
    e.stopPropagation();
});

CSS:

#testCaseId {
    margin-top: 170px;
    width: 400px !important;
    margin-left: 150px !important;
}

Tell me if you need anything else.