CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Shihab
Shihab

Reputation: 29

Jquery theme doesn't apply after appending new elements

I'm having problem after appending elements it comes without jquery theme. I tried to apply the theme manually but still doesn't work with input box and the select box. Is there any way to fix this or way of how did I write the code of how to append elements is wrong. Also the code of remove button didn't work

here is my javascript code:-

 $(window).on('pageinit', function() {
 $(document).ready(function(){
    $("#Sadd").click(function() {
	var tDiv = $('#GPA1');
    var i = $('#GPA1 h1').size() + 1;
	$('<li class="ui-li-static ui-body-inherit" style="border:none"><h1>Module ' + i +':</h1></li><li class="ui-field-contain ui-li-static ui-body-inherit" data-role="fieldcontain" style="border:none"><label for="Sc' + i +'">Credits:</label><input type="number" step="0.01" id="Sc' + i +'" name="Sc' + i +'" data-clear-btn="true"></li><li class="ui-field-contain ui-li-static ui-body-inherit ui-last-child" data-role="fieldcontain" style="border:none"><label for="Sgrade' + i +'" class="select">Grade:</label><select class="Sgrade' + i +'" data-theme="f" id="Sgrade' + i +'"><option value="-1">—</option><option value="4">A</option><option value="3.7">A-</option><option value="3.3">B+</option><option value="3">B</option><option value="2.7">B-</option><option value="2.3">C+</option><option value="2">C</option><option value="1.7">C-</option><option value="1.3">D+</option><option value="1">D</option><option value="0">F</option></select></li>').appendTo(tDiv);
	 i++;
     return false;
	 });
 $("#Sremove").click(function() {
	 var i = $("#GPA1 h1").length();
                if( i > 5 ) {
                        $(this).parents('h1').remove();
                        i--;
                }
                return false;
				
				
  });			
  });
});

Here is a picture of what is happening when I add new element:- enter image description here

and here is a demo of my html and javascript just click add button and you will see the result

http://jsfiddle.net/tny5mh2n/

Upvotes: 0

Views: 291

Answers (2)

Borshon saydur rahman
Borshon saydur rahman

Reputation: 130

i cant see the html though.but i fall in same problem before. firstly you should use $.on instead of $.click.and secondly while you add elements dynamically you should get your child dynamic elements by their parents. you cannot get them directly by their class or id after creating them dynamically

Upvotes: 0

Santosh
Santosh

Reputation: 381

There was issue with div tag you didn't add div tag in that try to replace with this even i have updated in http://jsfiddle.net/tny5mh2n/2/

$('<li class="ui-li-static ui-body-inherit" style="border:none"><h1>Module ' + i +':</h1></li><li class="ui-field-contain ui-li-static ui-body-inherit" data-role="fieldcontain" style="border:none"><label for="Sc' + i +'">Credits:</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear"><input type="number" step="0.01" id="Sc' + i +'" name="Sc' + i +'" data-clear-btn="true"><a href="#" class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a></div></li><li class="ui-field-contain ui-li-static ui-body-inherit ui-last-child" data-role="fieldcontain" style="border:none"><label for="Sgrade' + i +'" class="select">Grade:</label><div class="ui-select"><div class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-btn-f ui-corner-all ui-shadow" id="Sgrade5-button"><span class="Sgrade5">—</span><select class="Sgrade' + i +'" data-theme="f" id="Sgrade' + i +'"><option value="-1">—</option><option value="4">A</option><option value="3.7">A-</option><option value="3.3">B+</option><option value="3">B</option><option value="2.7">B-</option><option value="2.3">C+</option><option value="2">C</option><option value="1.7">C-</option><option value="1.3">D+</option><option value="1">D</option><option value="0">F</option></select></div></div></li>').appendTo(tDiv);

Upvotes: 2

Related Questions