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

Question

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

我偶然发现了这个question, which showed this demo，稍微修改一下就非常适合我的需要。

该演示在 JSFiddle 上完美运行，但在我的开发环境中出现错误：

Uncaught TypeError: Cannot set property 'innerHTML' of undefined

追溯到我的脚本，它说 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>

我对 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

Answer 1

"Uncaught TypeError: Cannot set property 'innerHTML' of undefined" 错误实际上是指 infoModal.find('#modal-body')[0] 部分而不是 htmlData 部分。

所以，您收到此错误是因为它表示 infoModal.find('#modal-body')[0] 不存在。在您使用代码的演示中，它有一个 <div id="myModal"></div> 与您的 var infoModal = $('#myModal');

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

Cannot set property 'innerHTML' of undefined

javascript

ajax

jquery

laravel-5.1

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

Cannot set property 'innerHTML' of undefined

javascript

ajax

jquery

laravel-5.1

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