Question

我正在尝试使用Ajax将一些数据发布到php脚本中。我希望在单击删除按钮时触发ajax请求，然后删除单击单击按钮的div。

以下是代码：

<div class="container content">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-blue margin-bottom-40">
                    <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
                    </div>                                     
                    <table class="table">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email</th>
                                <th>Care Home</th>
                                <th>Last Login</th>
                                <th>Number of Log-ins</th>
                                <th>Last Data Upload</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($employees as $employee)
                            <tr id="tr{{$employee->email}}">
                                <td class="fn">{{$employee->username}}</td>
                                <td class="ln">{{$employee->username}}</td>
                                <td class="email">{{$employee->email}}</td>
                                <td class="carehome_name">{{$employee->carehome_name}}</td>
                                <td class="last_login">{{$employee->last_login}}</td>
                                <td class="n_sessions">{{$employee->n_sessions}}</td>
                                <td class="last_upload">{{$employee->last_upload}}</td>
                                <td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>                          
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>          
    </div>

以下是Javascript：

<script type="javscript">

  $('.btn-danger').on('click', function(e){

    e.preventDefault();
    var id = $(this).attr('id');
    alert(id);

    $.ajax({
      url: '../../controllers/userManagementAjax.php',
      type: 'post',
      data: {'action': 'delete', 'email': id},
      success: function(data, status) {
        if(data == "ok") {
          $('#tr'+'id').remove();
        }
      },

      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
      }


    }); // end ajax call
  });

</script>

我尝试过很多东西，没有任何作用，点击事件不会记录到控制台。

谢谢大家的建议！

Answer 1

请看这里。

http://jsfiddle.net/py6PJ/

我删除了你的PHP循环，似乎点击就好了。请确认。

<div class="container content">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-blue margin-bottom-40">
                    <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
                    </div>                                     
                    <table class="table">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email</th>
                                <th>Care Home</th>
                                <th>Last Login</th>
                                <th>Number of Log-ins</th>
                                <th>Last Data Upload</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr id="tr{{$employee->email}}">
                                <td class="fn">{{$employee->username}}</td>
                                <td class="ln">{{$employee->username}}</td>
                                <td class="email">{{$employee->email}}</td>
                                <td class="carehome_name">{{$employee->carehome_name}}</td>
                                <td class="last_login">{{$employee->last_login}}</td>
                                <td class="n_sessions">{{$employee->n_sessions}}</td>
                                <td class="last_upload">{{$employee->last_upload}}</td>
                                <td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>                          
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>          
    </div>

Javascript是一样的。

点击时不会触发Ajax请求

1 个答案: