获取ajax数据并在bootstrap模式上显示

我正在构建应用程序主机餐厅菜单。 当单击一个菜单项时，我想通过ajax从我的api中获取项目的数据并将其显示在bootstrap模式上。

JavaScript的

(function() { var infoModal = $('#myModal'); $('.modal-toggle').on('click', function(){ $.ajax({ type: "GET", url: '/api/menu-item/'+$(this).data('id'), dataType: 'json', success: function(data){ var item = JSON.parse(data); var htmlData = '
'; htmlData += item.name; htmlData += '
'; infoModal.find('#modal-body').innerHTML = htmlData; } }); infoModal.modal(); }); })(jQuery); 

模态触发器

 id }}}">
{{{ $item->name }}} 

模态

 
 
 
 
 × 
New message
 
 
 
 Close Add to cart 
  

apis的回应

 {"id":4,"menu_category_id":446,"name":"kunzereichert","description":"Dolores impedit ut doloribus et a et aut.","price":"999.99","created_at":"2015-04-10 05:55:23","updated_at":"2015-04-10 05:55:23"} 

当我点击触发器时弹出模态并且ajax请求出现在我的浏览器网络上，状态代码为200，但是模态内部html没有更新。 我知道这里可能是这些问题的主持人，但我似乎无法找到一个有帮助的人。 请帮忙

Answer 1

而不是这个：

 infoModal.find('#modal-body').innerHTML = htmlData; 

你应该用这个：

 infoModal.find('#modal-body')[0].innerHTML = htmlData; 

如果你想坚持所有jQuery的方式，那么使用这个：

 infoModal.find('#modal-body').html(htmlData); 

这是JSFiddle，使用假响应：

https://jsfiddle.net/6o7atqd3/1/