抱歉我的英语不好:)
我在 Laravel 中 AJAX 成功时遇到问题，在 AJAX 中成功执行处理后，其他功能无法正常工作。如下图，我点赞状态或者评论，折叠按钮和收藏按钮功能不起作用。
在 AJAX 中我使用成功
$("#divwrap").load(" #divwrap");
div，id 为 divwrap 我用作包装器
请帮忙:)
代码
<div id="divwrap">
@foreach($singgah as $d)
<div class="box box2">
<div class="box-body box-body-custom">
<div class="post">
<div class="user-block">
<img class="img-circle" src="{{ asset('storage/' . $d->user->avatar ) }}" alt="user image">
<span class="username">
<?php $email = Crypt::encrypt($d->user->email) ?>
<a href="{{ action('ProfileController@show', $d->user->email) }}">{{$d->user->name }} </a>
<div class="btn-group pull-right custom-curret nav-right1">
<button type="button" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-ellipsis-h"></span>
</button>
<ul class="dropdown-menu">
@if(Auth::user()->name ==$d->user->name )
<li><a onclick="editForm('{{$d->id }}')" class="pointer-jempol"> <i class="fa fa-pencil-square-o"></i> Edit Kiriman</a></li>
<li><a onclick="deleteData('{{$d->id }}')" class="pointer-jempol"> <i class="fa fa-times-circle"></i> Hapus Kiriman</a></li>
<li role="separator" class="divider"></li>
@endif
<li><a href="#" class="pointer-jempol"><i class="fa fa-exclamation-circle"></i> Laporkan Kiriman</a></li>
</ul>
</div>
</span>
<span class="description"><i class="fa fa-hashtag" title="Sebagai"></i> {{$d->category}} - <i class="fa fa-clock-o"></i> {{$d->created_at->diffForHumans()}}</span>
</div>
<p>
{{ $d->content }}
</p>
<div class="box box-default box-costum-collapse">
<div class="box-header with-border" style="padding:0px;">
<a class="label label-primary" title="Kota"><i class="fa fa-map-marker"></i> {{$d->lokasi }}</a>
<a class="label label-primary" title="Kontak"><i class="fa fa-phone-square"></i> {{$d->contact }}</a>
<table class="pull-right">
<tr>
<td class="mailbox-star" data-value="{{$d->id}}"><i class="fa fa-star-o text-red"></i> <a id="coba">{{ $d->singgahlike->count() }}</a></td>
<td class="btn-nopadding btn btn-box-tool" data-widget="collapse"> | <i class="fa fa-comment"></i> {{ $d->singgahcomment->count() }}</td>
</tr>
</table>
</div>
<div class="box-body" style="padding:0px;">
<div class="box-komentar">
@include('layouts.form.formComment')
<div id="box-komentar">
@foreach($d->singgahcomment as $c)
<div class="komentar-post">
<div class="user-block">
<img class="img-circle" src="{{ asset('storage/' . $c->user->avatar ) }}" alt="user image">
<span class="username usernamekoment">
<a href="{{ action('ProfileController@show', $c->user->email) }}">{{$c->user->name }} </a>
<div class="btn-group custom-curret nav-right-koment pull-right">
<button type="button" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-ellipsis-h"></span>
</button>
<ul class="dropdown-menu">
@if(Auth::user()->name ==$c->user->name )
<li><a onclick="deleteComment('{{$c->id }}')" class="pointer-jempol"><i class="fa fa-times-circle"></i> Hapus Komentar</a></a></li>
<li role="separator" class="divider"></li>
@endif
<li><a href="#" class="pointer-jempol"><i class="fa fa-exclamation-circle"></i> Laporkan komentar</a></li>
</ul>
</div>
</span>
<span class="description descriptionkoment"><i class="fa fa-clock-o"></i> {{$c->created_at->diffForHumans()}}</span>
</div>
<p>{{ $c->comment }}</p>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
这是一个ajax成功过程:
$(function () {
$(".mailbox-star").click(function (e) {
e.preventDefault();
var singgah_id = $(this).data('value');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ url('singgah/like') }}",
type: "POST",
data: {singgah_id:singgah_id},
success: function (data) {
$("#divwrap").load(" #divwrap");
$('div.flash-message').html(data);
},
error: function () {
alert('Oops! error!');
}
});
//detect type
var $this = $(this).find("i");
var fa = $this.hasClass("fa");
if (fa) {
$this.toggleClass("fa-star");
$this.toggleClass("fa-star-o");
}
});
});
下面我展示了一个按钮，该按钮在 AJAX 成功按钮起作用之前仅起作用一次，但在 AJAX 成功按钮之后它就不起作用了
最佳答案
这是因为在 jQuery 更改并再次加载 DOM 元素之后，即使 id 和类名相同，但 DOM 元素的虚拟 id 发生了更改，并且 javascript 或 jQuery 认为这与以前的不同。
换句话说，jQuery 在加载 DOM 时附加到元素，因此加载完成后，它无法识别新元素。为此，您必须从文档中获取元素。
所以你的代码将如下所示:
$(document).on('click', ".mailbox-star", function (e) {
e.preventDefault();
var singgah_id = $(this).data('value');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ url('singgah/like') }}",
type: "POST",
data: {singgah_id:singgah_id},
success: function (data) {
$("#divwrap").load(" #divwrap");
$('div.flash-message').html(data);
},
error: function () {
alert('Oops! error!');
}
});
//detect type
var $this = $(this).find("i");
var fa = $this.hasClass("fa");
if (fa) {
$this.toggleClass("fa-star");
$this.toggleClass("fa-star-o");
}
});
注意这一行:
$(document).on('click', ".mailbox-star", function (e) {
而不是这个:
$(function () {
$(".mailbox-star").click(function (e) {
因此，如果您希望事件在重新加载部分 DOM 后起作用，您必须从文档中寻址选择器。请注意，选择元素的速度比第一个元素要慢一些。
关于javascript - AJAX+Laravel : after I successfully do process in AJAX, 其他功能无法使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51461996/