0

Hi I have the code where i am using the jquery mobile to create a mobile application.BUt in my code i have dynamically created the page and calculate the employee expeience .As the id is genertaed on newly created row so i am taking class as unique to fire the event.But that change event is not triggered where as click event is triggered on the same class 'to'.Below is my code.Please suggest how to achieve this?

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://rawgithub.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
    <script id="mobile-datepicker" src="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
    <!-- Page Values and Script -->
    <script>
    $(document).ready(function() {
        $("input.add").live('click', function() {

            var length = 0;
            var table = $(this).closest('table').attr('id');

            if (table == 'Employee')
                var length = $('#Employee').find('tr').length;

            console.log(length);
            var $tr = $(this).closest('tr');
            var $clone = $tr.clone();
            $clone.find('input:text').val('');
                       
            var id2 = 'To' + length;
            console.log(id2);
            $clone.find(".to").parent().html(' <input class="to" id="' + id2 + '" name="To" type="text" value="" data-role="date" style="width:100%" />');

            $clone.find('input[data-role="date"]').date();
            console.log($clone);
            $tr.after($clone);
        });
S Das
  • 51
  • 5
  • You need to use delegtion [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Shaunak D Jun 12 '15 at 06:40

2 Answers2

0

Try change this code

 $('input.to').on('change', function(){...});

into 

 $(document).on('change','input.to', function(){...});
Norlihazmey Ghazali
  • 8,762
  • 1
  • 19
  • 37
0

I assume that you are using jquery.1.7 version. So try using .live as below:

$('input.to').live('change', function() {

or if its a dynamically added element better to use $(document) to listen to the events of dynamically added element

$(document).on('change','input.to', function() {
Guruprasad J Rao
  • 28,253
  • 13
  • 87
  • 176