我在我的Laravel刀片模板文件中添加了AJAX脚本。但由于某种原因，我的JavaScript无法正常工作。它位于页面上，一切都很好但是当我尝试通过点击按钮来触发功能时，它就不起作用了。
这个JavaScript代码不能在单独的文件中，因为我正在创建许多不同的表单，应该使用它自己的JavaScript函数进行处理。所以我需要在表单的循环中使用这个函数。
这是我的整个刀片模板文件脚本：
@if($inventories)
<a href="{{ url('/inventory') }}" type="button" class="btn btn-sm btn-primary"> <<- Back To Inventory</a>
<div class="text-center"><b>Search Page</b></div>
<br>
<br>
<div class="search">
<div class="col-md-12">
@include(env('THEME').'.search_box')
</div>
</div>
<table>
@foreach($inventories as $inventory)
<tr >
<td class="part_img" rowspan="3"><a href="{{ route('inventory.show',['slug' => $inventory->slug]) }}"><img src="{{ asset(env('THEME')) }}/images/inventory/{{$inventory->main_img}}"></a></td>
</tr>
<tr>
<td class="inventory_part_title" colspan="8">
<div style="float: left; margin: 0 30px;">{{ $inventory->part_number }}</div>
<div style="float: left;"><a href="{{ route('inventory.show',['slug' => $inventory->slug]) }}">{{ $inventory->title }}</a></div>
<div style="float: right; margin-right: 50px;">{{ $inventory->upc_number }}</div>
</td>
</tr>
<tr>
<td><b>Location:</b> {{ $inventory->storage_location }}</td>
<td><b>Brand:</b> {{ $inventory->brand }}</td>
<td><b>Supplier:</b> {{ $inventory->supplier }}</td>
<td><b>GBP:</b> £{{ $inventory->unit_price_gbp }}</td>
<td><b>USD:</b> ${{ $inventory->unit_price_usd }}</td>
<td><b>In Stock:</b> {{ $inventory->unit_in_stock }}</td>
<td><b>Sold:</b> {{ $inventory->unit_sold }}</td>
<td>
<div class="onpage-sold-input">
{!! Form::open(['url' => route('sold.sold'),'class'=>'contact-form', 'id'=>'search-sold-button-'.$inventory->id,'method'=>'POST']) !!}
{!! Form::text('sold', old('sold'), array('class'=>'form-control', 'placeholder'=>'Qty.')) !!}
<input type="hidden" name="part_id" value="{{ $inventory->id }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
{!! Form::button('Sold', ['class' => 'btn btn-sm btn-success sold-button', 'id'=>'sold-button-'.$inventory->id,'type'=>'submit']) !!}
{!! Form::close() !!}
</div>
<script type="text/javascript">
$('#sold-button-{{ $inventory->id }}').on('click', function (e) {
e.preventDefault();
var form = $('#search-sold-button-{{ $inventory->id }}'),
data = form.serialize(),
ajax_url = form.attr('action'),
alert_section = $('.alert-section');
console.log(ajax_url);
console.log(data);
$.post(ajax_url, data, function (resp) {
alert_section.fadeIn().find('.alert').html(resp);
setTimeout(function () {
alert_section.fadeOut();
}, 3000)
})
});
</script>
</td>
<!--<td><button type="button" class="btn btn-sm btn-success">Edit</button></td>-->
</tr>
<tr>
<td colspan="8"></td>
</tr>
@endforeach
</table>
@else
<p>Inventory is empty!</p>
@endif
如何解决此问题？
答案 0 :(得分：0)
以下是您给定代码的示例。希望这会对你有所帮助。
代码可能不起作用我还没有测试过。但是这样你就不必将JS代码放在Loop中，而是具有单一功能。
这里我们正在调用JS函数＆＃34; searchSold＆＃34;提交点击事件。
@if($inventories)
<a href="{{ url('/inventory') }}" type="button" class="btn btn-sm btn-primary"> <<- Back To Inventory</a>
<div class="text-center"><b>Search Page</b></div>
<br>
<br>
<div class="search">
<div class="col-md-12">
@include(env('THEME').'.search_box')
</div>
</div>
<table>
@foreach($inventories as $inventory)
<tr >
<td class="part_img" rowspan="3"><a href="{{ route('inventory.show',['slug' => $inventory->slug]) }}"><img src="{{ asset(env('THEME')) }}/images/inventory/{{$inventory->main_img}}"></a></td>
</tr>
<tr>
<td class="inventory_part_title" colspan="8">
<div style="float: left; margin: 0 30px;">{{ $inventory->part_number }}</div>
<div style="float: left;"><a href="{{ route('inventory.show',['slug' => $inventory->slug]) }}">{{ $inventory->title }}</a></div>
<div style="float: right; margin-right: 50px;">{{ $inventory->upc_number }}</div>
</td>
</tr>
<tr>
<td><b>Location:</b> {{ $inventory->storage_location }}</td>
<td><b>Brand:</b> {{ $inventory->brand }}</td>
<td><b>Supplier:</b> {{ $inventory->supplier }}</td>
<td><b>GBP:</b> £{{ $inventory->unit_price_gbp }}</td>
<td><b>USD:</b> ${{ $inventory->unit_price_usd }}</td>
<td><b>In Stock:</b> {{ $inventory->unit_in_stock }}</td>
<td><b>Sold:</b> {{ $inventory->unit_sold }}</td>
<td>
<div class="onpage-sold-input">
{!! Form::open(['url' => route('sold.sold'),'class'=>'contact-form', 'id'=>'search-sold-button-'.$inventory->id,'method'=>'POST']) !!}
{!! Form::text('sold', old('sold'), array('class'=>'form-control', 'placeholder'=>'Qty.')) !!}
<input type="hidden" name="part_id" value="{{ $inventory->id }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
{!! Form::button('Sold', ['class' => 'btn btn-sm btn-success sold-button', 'id'=>'sold-button-'.$inventory->id,'type'=>'submit','onclick' => 'searchSold(event,".$inventory->id.")' ]) !!}
{!! Form::close() !!}
</div>
</td>
<!--<td><button type="button" class="btn btn-sm btn-success">Edit</button></td>-->
</tr>
<tr>
<td colspan="8"></td>
</tr>
@endforeach
</table>
@else
<p>Inventory is empty!</p>
@endif
<script type="text/javascript">
function searchSold(event,inventory_id){
event.preventDefault();
var form = $('#search-sold-button-'+inventory_id);
var data = form.serialize();
var ajax_url = form.attr('action');
var alert_section = $('.alert-section');
$.post(ajax_url, data, function (resp) {
alert_section.fadeIn().find('.alert').html(resp);
setTimeout(function () {
alert_section.fadeOut();
}, 3000)
});
}
</script>