在数据检索时显示数据 - Laravel

Question

我可以使用下面的代码将数据保存到我的数据库中。当用户单击复选框时，项目的名称将显示并存储在数据库中。但我现在的问题是，当我编辑存储的数据时，我能够检索已检查的项目（之前选择并保存的项目），但用于附加代码的 JS 没有运行。

当我取消选中并再次检查时，它可以正常工作。

编辑时，会检查保存在数据库中的项目，但显示所选项目名称的代码的 JS 部分没有运行。为什么会这样？

HTML

<div class="form-group">
  <label for="name" class="col-lg-1 control-label"> Name</label>
  <div class="col-lg-8">
    <input type="text" class="typeahead form-control" id="name" value="{!!$item->products['name']!!}" placeholder="  Name" name="name" required>
  </div>
</div>
<input onclick="return data(this)" data-food="{{$product->toJson()}}" type="checkbox" id="{!! $product->id !!}" name="{!! $product->name !!}" 
value="{!! $product->price !!}"  @foreach ($product->emps as $deliver)   @if($product->id == $deliver->id) checked @endif @endforeach  />

JS

function data(item)
{ 
  var ad = JSON.parse(item.dataset.stuff);

  if(item.checked == true)  {
    $('.container').append(
    '<div class="shipment_container" > '+ 
    '<p  class="name" >'+ad.name+'</p>'+
    '</div>');
  }
  else {
    $(".container.shipment_container [data-id=" + ad.id + "]").parent().remove();
  }
}

更新

$( document ).ready(function() {


    function data(item)
    { 
      var ad = JSON.parse(item.dataset.stuff);

      if(item.checked == true)  {
        $('.container').append(
        '<div class="shipment_container" > '+ 
        '<p  class="name" >'+ad.name+'</p>'+
        '</div>');
      }
      else {
        $(".container.shipment_container [data-id=" + ad.id + "]").parent().remove();
      }
    }



});

Answer 1

您仅在单击复选框时调用data()，但在编辑屏幕上您需要在加载时调用它并手动传递参数。

类似这样的：

function data(item)
{ 
  if(item.checked == true)  {
    // Do something if the item was chacked
  }
  else {
    // Do something else if it wasn't
  }
}

$( document ).ready(function() {

  var input = document.querySelector('input#{!! $product->id !!}');

  data(input);
});