Dynamically added fields not working with calendar field

JavaScript
1

I am trying to attach a calendar field to a dynamically added html code. Initially, the code shows 3 input fields (as shown in the “p_scents” div). When the “Add Another Employer” is clicked, it should generate another 3 inputs( as the ones above). It is working fine for me to generate the first 2 fields (without the calendar field), but when I add the calendar field, it is not working.

<h2><a href=“#” id=“addScnt”>Add Another Employer</a></h2>
<div id=“p_scents”>
<p>
<label>Employer Name</label><input class=“dynamic” type=“text” name=“employern” id=“employern” />
<label>Job Title</label><input class=“dynamic” type=“text” name=“jtitle” id=“jtitle” />
<label>Start Date </label>
<input type=“text” name=“startd” class=“textfield” />
<script language=“JavaScript”>
new tcal ({
// form name
‘formname’: ‘form’,
// input name
‘controlname’: ‘startd’
});
</script>
</p>
</div>

<script type=“text/javascript”>
$(function() {
var scntDiv = $(‘#p_scents’);
var i = $(‘#p_scents p’).size() + 1;

    $('#addScnt').live('click', function() {
		if( i &lt;= 10 ) {
            $('&lt;p&gt;&lt;label&gt;Employer Name&lt;/label&gt;&lt;input class="dynamic" type="text" name="employern' + i +'" id="employern" /&gt;&lt;label&gt;Job Title&lt;/label&gt;&lt;input class="dynamic" type="text" name="jtitle' + i +'" id="jtitle" /&gt;&lt;label&gt;Start Date &lt;/label&gt;

<input type=“text” name=“startd’ + i +'” class=“textfield” />
<script language=“JavaScript”>
new tcal ({‘formname’: ‘form’,‘controlname’: ‘startd’ + i +‘’});</script><a href=“#” id=“remScnt”>Remove</a></p>').appendTo(scntDiv);
i++;
return false;}
else{
alert(‘Maximum Reached!’);
}
});

    $('#remScnt').live('click', function() { 
            if( i &gt; 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });

});
</script>

2

the variable I appears to be only valid in the $(function(){ context. You’d need to move it outside, just below the <script> tag.

That said… I think you could do this a lot better.


$(function()
            {
                // unless your adding the addScnt button using javascript
                // you shouldn't need to use the live event. Even if you
                // are adding it using javascript, you could attach the 
                // click event as below when you add it.
                $('#addScnt').click(function(e)
                {
                    // prevent the link/button from doing what it
                    // should do normally, i.e. following a link
                    // or submitting a form
                    e.preventDefault();
                    // get the amount of items already added
                    // to the form.
                    var index = $('#p_scents > p').length;
                    // check if there is less than or equal to 10
                    if(index <= 10)
                    {
                        // add the html, setting the name field.
                        $('#p_scents').append($('<p><label>Employer Name</label><input class="dynamic" type="text" name="employern' + index +'" id="employern" /><label>Job Title</label><input class="dynamic" type="text" name="jtitle' + index +'" id="jtitle" /><label>Start Date </label><input type="text" name="startd' + index +'" class="textfield" /><a href="#" class="remScnt">Remove</a></p>'));
                        // call the tcal method
                        new tcal ({'formname': 'form','controlname': 'startd' + index});
                    }
                    else
                    {
                        // oops, more than 10
                        alert('Maximum reached!');
                    }
                });
                // as we are adding the items programatically
                // we need to use the live method.
                // Also, note that it is no longer #remScnt, but
                // .remScnt - You can only have one id per page,
                // so I have changed it to a class.
                $('.remScnt').live('click', function(e)
                {
                    e.preventDefault();
                    // if we have more than 2 items
                    if($('#p_scents > p').length > 2)
                    {
                        // get the closest P tag and remove it
                        $(this).closest('p').remove();
                    }
                    else
                    {
                        // oops, only 2 items left
                        alert('A minimum of two x is required!');
                    }
                });
            });

Hope this helps?!