Question

I am having trouble accessing the value of an HTML Input element using jQuery, this input element was written initially using .html() function in an earlier function.

THIS IS MY CODE THAT CREATES THE INPUT ELEMENT – NO ISSUES WITH THIS

<script type="text/javascript">
           $(document).ready(function() {
            $("#model").change(function()
                {                                
                 $.post("../includes/_ajaxSpecs.php",{ model:$(this).val() } ,function(data)
                 {
                var string = data;
                var partsArray = string.split(',');
                   $("#comp_specs").fadeTo(200,0.1,function() //start fading the messagebox
                   {
                    //add message and change the class of the box and start fading
                   $(this).html(partsArray[0]+"<input style='width:12em;margin-left:5px;border:1px solid #CCC;' name='input1' id='input1' /><br />"+partsArray[1]+"<input style='width:12em;margin-left:5px;border:1px solid #CCC;' name='input2' id='input2' /><br />").addClass('jText').fadeTo(900,1);
                     });
                  });
                });
              });
</script>

Now I want to grab the value in #input1 and set a different input box (#new_input) to that value, using this code:

<script type="text/javascript">
$(document).ready(function() {
$("#input1").change(function()
        {
    var text = $("#input1").val(); 
    $("#new_input").val(text);      
        }); 
});

Not sure why I cannot access these values in #input1 and #input2 even though I can see them fine in the final POST? Are there issues with JQuery accessing form elements written by the .html() function? I use the second function listed quite a bit and know this works with standard form elements…

UPDATE: HERE IS MY UPDATED CODE PER YOUR SUGGESTIONS, BUT STILL UNABLE TO GRAB IT?

<script type="text/javascript">
$('#div1').on('change', '#input1', function() {
    $("#input1").change(function() {

    var text = $("#input1").val(); 
    $("#new_input").val(text);      
        }); 
});
</script> 

UPDATE: SOLVED, Thanks @Dragon

Answer 1

Like others pointed out, you’re binding the event handler to ‘#input1’ element before it’s created. Either bind it after it’s created, or bind it to the document with ‘#input1’ as the context. Alternatively, you can bind it to any parent element that lives long enough to see the complete cycle of binding the handler and invoking it.

$(document).ready(function() {
$(document).on('change', "#input1", function()
        {
    var text = $("#input1").val(); 
    $("#new_input").val(text);      
        }); 
});

That’s all. For more info, http://api.jquery.com/on/