Javascript 无法设置属性'；innerHTML'；未定义的

我一直在尝试在我的站点上实现一个模式，该模式使用ajax调用动态加载内容

我偶然发现了这个，它显示了这个，经过一点修改后，它将完全适合我的需要

该演示在JSFIDLE上运行得非常好，但在我的开发环境中，出现了以下错误：

未捕获的TypeError:无法设置未定义的属性“innerHTML”

追溯到我的脚本，它说htmlData是未定义的，但它是在它上面定义的

运行调用的脚本：

<script>
(function() {
    var infoModal = $('#myModal');
    $('.modal-toggle').on('click', function(){
        $.ajax({
            type: "GET",
            url: '/api/menu-item/'+$(this).data('id'),
            dataType: 'json',
            error: function(data){
                fakeResponse = {"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"}
;
                var htmlData = '<ul><li>';
                htmlData += fakeResponse.name;
                htmlData += '</li></ul>';
                infoModal.find('#modal-body')[0].innerHTML = htmlData;
            }
        });
    });
})(jQuery);
</script>

（功能（）{
var infoModal=$（“#myModal”）；
$（'.modal toggle'）。打开（'click'，function（）{
$.ajax({
键入：“获取”，
url:'/api/菜单项/'+$（this.data（'id'），
数据类型：“json”，
错误：函数（数据）{
FakerResponse={“id”：4，“菜单类别id”：446，“名称”：“kunzereichert”，“描述”：“Dolores impedit ut doloribus et a et aut.”，“价格”：“999.99”，“创建时间”：“2015-04-10 05:55:23”，“更新时间”：“2015-04-10 05:55:23”}
;
var htmlData='
'；
htmlData+=fakeResponse.name；
htmlData+='
'；
infoModal.find（'#modal body'）[0].innerHTML=htmlData；
}
});
});
})（jQuery）；

我的javascript不是很流利，所以如果您能帮助我解释为什么会出现这个错误，我将不胜感激。我只是尝试从JSON响应加载一些信息，然后显示在模式中

如果有更好的方法，那么我愿意接受你的建议

编辑：这是我的页面的HTML代码

@extends('sbadmin')

@section('content')

<div class="col-lg-10 col-lg-offset-1">

    <h1><i class="fa fa-users"></i> Staff</h1>

    <div class="table-responsive">
        <table class="table table-bordered table-striped">

            <thead>
                <tr>
                    <th>Name</th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                @foreach ($staff as $employee)
                <tr>
                    <td>{{ $employee->first_name }} {{ $employee->last_name }}</td>
                    <td><button type="button" class="modal-toggle" data-toggle="modal" data-target="#myModal" data-id="{{ $employee->id }}">Disable</button><a href="{{ url('staff/regularhours/' . $employee->id) }}" class="btn btn-primary">Staff Details</a>  <a href="{{ url('staff/regularhours/' . $employee->id) }}" class="btn btn-success">Regular Hours</a></td>
                </tr>
                @endforeach
            </tbody>

        </table>
    </div>
    {!! $staff->render() !!}

</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<script>
(function() {
    var infoModal = $('#myModal');
    $('.modal-toggle').on('click', function(){
        $.ajax({
            type: "GET",
            url: '/api/menu-item/'+$(this).data('id'),
            dataType: 'json',
            error: function(data){
                fakeResponse = {"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"}
;
                var htmlData = '<ul><li>';
                htmlData += fakeResponse.name;
                htmlData += '</li></ul>';
                infoModal.find('#modal-body')[0].innerHTML = htmlData;
            }
        });
    });
})(jQuery);
</script>

@endsection

@extends（'sbadmin'））
@节（“内容”）
工作人员
名称
@foreach（员工为$employee）
{{$employee->first_name}{{{$employee->last_name}
使残废
@endforeach
{！！$staff->render（）！！}
&时代；
模态头

接近
（功能（）{
var infoModal=$（“#myModal”）；
$（'.modal toggle'）。打开（'click'，function（）{
$.ajax({
键入：“获取”，
url:'/api/菜单项/'+$（this.data（'id'），
数据类型：“json”，
错误：函数（数据）{
FakerResponse={“id”：4，“菜单类别id”：446，“名称”：“kunzereichert”，“描述”：“Dolores impedit ut doloribus et a et aut.”，“价格”：“999.99”，“创建时间”：“2015-04-10 05:55:23”，“更新时间”：“2015-04-10 05:55:23”}
;
var htmlData='
'；
htmlData+=fakeResponse.name；
htmlData+='
'；
infoModal.find（'#modal body'）[0].innerHTML=htmlData；
}
});
});
})（jQuery）；
@端部

未捕获类型错误：无法设置未定义的属性'innerHTML'错误实际上是指

infoModal.find（'#modal body'）[0]

部分，而不是

htmlData

部分

因此，出现此错误是因为它说明

infoModal.find（“#modal body”）[0]

不存在。在使用源代码的演示中，它有一个与您的

var infoModal=$（“#myModal”）相关的

div中有一个
。这就是
infoModal.find（'#modal body'）[0]
试图查找的内容。因此，您的错误是说
find（）
要查找的元素不存在，您正在尝试设置其innerHTML

因此，请检查您的HTML，并确保您复制了演示中的HTML，或者至少复制了演示中的
部分

编辑

您的HTML显示您的元素是
，但您的调用是
infoModal.find（“#modal body”）[0]
，它正在查找
modal body
的ID。尝试将其更改为：
infoModal.find（'.modal body'）[0].innerHTML
您使用的模态body是类名，但您可以通过Id名称访问
你可以更改这个代码

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

到

或

这很好用

或者addid name ismodal body
$（“#myModal”）
是一个jQuery选择器，用于查找id为
myModal
的HTML元素，因此您应该确保HTML中存在该元素。您可能需要阅读函数-您将看到
error
属性实际上是“请求失败时要调用的函数”。您可能需要在请求成功时添加
success
属性（或将error替换为）？你确定在div
id=modal body
中有div
id=myModal
@MKA我已经为我的modal.change
infoModal.find（“#modal body”）[0]添加了HTML代码
to
infoModal.find（'.modal body'）[0]。innerHTML=htmlData这解决了它。我没有在模态体中包含
id=“模态体”
。这么简单的错误！谢谢，最好是
infoModal.find（'.modal body'）.html（）不用担心@James。我们都在那里看了好几个小时的代码，结果证明这是一个简单的修复方法。@bleeted0d也可以。谢谢你的帮助。我的意思是
infoModal.find（'\modelbodbody'）.html（）
，使用
.html（）
，因为您已经在使用jQuery；）
infoModal.find('.modal-body')[0].innerHTML = htmlData;

$('.modal-body')html(htmlData);