Почему элемент Div отлично выглядит при копировании вручную, но выглядит ужасно при добавлении jquery append?

Question

Моя страница вызывает AJAX-вызов и добавляет некоторые данные в div. Затем присоединяется к DIV с добавлением jquery. Кажется, что прилагаемый контент не соответствует правильному CSS. Я проверил вывод с помощью предупреждения и вставил вывод вручную на страницу, это выглядит отлично. В чем может быть проблема?

Вот код

var myDiv = '<div class="list-group-item" onclick="myhref(' + "docinfo.html" + ');">' + 
'<div class="row" id="row">' + 
'<div class="col-xs-3 col-sm-5"/>' + 
'<img src="' + docDetails[25] + '" class="img-thumbnail" width="100" height="100">' + 
'<p><b>&#8377 </b>' + docDetails[24] + '</p>' + 
'<p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-eye-open"></span>' + docDetails[2] + '</a><br></p>' + 
'<p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-thumbs-up"></span> ' + docDetails[13] + '</a> </p>' + 
'</div>' + 
'<div class="col-xs-8 col-sm-9">' + 
'<ul class="list-group">' + 
'<p><b>' + docDetails[22] + '</b></p>' + 
'<p>' + docDetails[10] + ' &nbsp;&nbsp; <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-briefcase"></span>' + docDetails[17] + 'yrs</a> </p>' + 
'<p><strong>Location:</strong>' + docDetails[14] + '</p>' + 
'<p>' + day + '<br>' + 
'<span>' + time + '</span><br>' + 
'<a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span>' + 
'</ul>' + 
'</div>' + 
'</div>'; 

$ ("# searchfield") добавить (myDiv).

Выход myDiv при проверке через оповещения функции:

<div class="list-group-item" onclick="myhref(docinfo.html);"><div class="row" id="row"><div class="col-xs-3 col-sm-5"/><img src="500" class="img-thumbnail" width="100" height="100"><p><b>&#8377 </b>0</p><p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-eye-open"></span>null</a><br></p><p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-thumbs-up"></span> Shalimar Bagh</a> </p></div><div class="col-xs-8 col-sm-9"><ul class="list-group"><p><b>null</b></p><p>4 &nbsp;&nbsp; <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-briefcase"></span>nullyrs</a> </p><p><strong>Location:</strong>Kamlesh clinic</p><p>undefined<br><span>null</span><br><a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span></ul></div></div> 

и CSS имеет бутстрапе

и вот фрагмент searchfiled

<div class="container-fluid" id ="searchfield"> 

         </div> 

этого результата, когда добавляется jQuery: http://imgur.com/LYE9alR

и это когда я вручную вставил вывод myDiv в поле #searchfield: http://imgur.com/jrWtuyN

Answer 1

Почему вы объединяете строку без переменных и значений. Просто создайте такую ​​строку

var myDiv='<div class="list-group-item" onclick="myhref('+"docinfo.html"+');"><div class="row" id="row"><div class="col-xs-3 col-sm-5"/><img src="'+docDetails[25]+'" class="img-thumbnail" width="100" height="100"><p><b>&#8377 </b>'+docDetails[24]+'</p><p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-eye-open"></span>'+docDetails[2]+'</a><br></p><p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-thumbs-up"></span> '+docDetails[13]+'</a> </p></div><div class="col-xs-8 col-sm-9"><ul class="list-group"><p><b>'+docDetails[22]+'</b></p><p>'+docDetails[10]+' &nbsp;&nbsp; <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-briefcase"></span>'+docDetails[17]+'yrs</a> </p><p><strong>Location:</strong>'+docDetails[14]+'</p><p>'+day+'<br><span>'+time+'</span><br><a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span></ul></div></div>'; 

$("#searchfield").append(myDiv);

Answer 2

1. Проверьте, добавлено ли добавлено правильное местоположение и загружен файл css. Проверьте элемент браузера Inspect.