Content of the input is "visually" unchanged

Question

EDIT UPDATED CODE WITH CORRECTION AND FURTHER EXPLAINATION, THANKS TO ALL

I have a problem with some inputs.

My code dynamically produces some <a> elements, and some <inputs> as well.

Let's say these <a> have class="aclass" data-input="pid" , the inputs have id="pid"

My code:

 $("#prod_category").on("change", (function(evt) { //this appens when this select change
    evt.preventDefault();
    $("#div1").remove();                      
    $("#div2").remove();

    var valu = this.options[this.selectedIndex].value;

    //I build some divs

    var left = "<div id="div1">";
    var right = "<div id="div2">";

    //we fill further these divs, then close

    left  += "</div>";
    right += "</div>";

    $("#static_existing_div").append(left);
    $("#static_existing_div2").prepend(right);

    $("#div1").accordion({     //I use accordion (jQuery ui) on this div
                          collapsible: true
                        });
}));

//FOMM
//the links <a> with class="aclass" are located inside div1
//I have to use $(static parent element).on(evt, ".aclass", ...) I choose document
$(document).on("click", ".aclass" ,function(evt) {  
    evt.preventDefault();
    var ele = $(this);
    var datain = ele.data("input");

    if($("#" + datain).length) {
       var elein = $("#" + datain);
       elein.attr("value", "TT");
       alert(elein.val());
    }
});

This alerts me "TT", and the value of the input is TT indeed but the content of the input is "visually" unchanged. I tried with val() too.

What am I doing wrong?

Answer 1

If I get it right, you are getting the id of the input elements from the data-input field of the <a> tag and trying to change that element. However after you check if that element exists or not in:

if($("#" . datain).length())

you try to change another element but not the found one?

var elein = $("#" + dataf); 

What is dataf here? If you want to change the element you have just found, it should be

var elein = $("#" + datain); 

More elaboration is needed if your goal is different. Couldn't comment because of my reputation, would ask for more clarity otherwise.

Answer 2

Your code giving lot of confusion. My assumption is on data-input you will get some value, an input filed should have id with the same value. Based on that id , you want to assign the value.

You have the confusion on how to combine the value with # and how to assign the value to the new field. Look at the code below, you will get some clear idea.

 $(document).on("click", ".aclass" ,function(evt) {  
  evt.preventDefault();
  var ele = $(this);                 
  var datain = ele.data("input");
  if(datain) {   
    var elein = $("#"+datain);     
    elein.attr("value", "TT");      
    alert(elein.val());             
  }
}); 

DEMO

Answer 3

There are certain obvious syntax errors in your code such as

$("#" . datain).length()

is invalid, you it must be length

$("#" + datain).length

Answer 4

This works fine for me for dynamically added hyperlink and textboxes also. Below snippet works fine for me on a html page and visual representation is ok.

 $("#prod_category").on("change", (function(evt) { //this appens when this select change //evt.preventDefault(); $("#div1").remove(); $("#div2").remove(); var valu = this.options[this.selectedIndex].value; //I build some divs var left = "<div id='div1'><a class='aclass' data-input='p1'>One</a><input id='p1' type='text'/>"; var right = "<div id='div2'><a class='aclass' data-input='p2'>Two</a><input id='p2' type='text'/>"; //we fill further these divs, then close left += "</div>"; right += "</div>"; $("#static_existing_div").append(left); $("#static_existing_div2").prepend(right); $("#div1").accordion({ //I use accordion (jQuery ui) on this div collapsible: false }); })); //FOMM //the links <a> with class="aclass" are located inside div1 //I have to use $(static parent element).on(evt, ".aclass", ...) I choose document $(document).on("click", ".aclass" ,function(evt) { evt.preventDefault(); var ele = $(this); var datain = ele.data("input"); if($("#" + datain).length) { var elein = $("#" + datain); elein.attr("value", "TT"); alert(elein.val()); } });

 <script src="https://code.jquery.com/jquery-2.2.1.js" type="text/javascript"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" type="text/javascript"></script> <select id="prod_category"> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> <option value="1">4</option> <option value="1">5</option> </select> <div id="static_existing_div"></div> <div id="static_existing_div2"></div>