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.food);

  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

我认为您希望在容器元素中显示您的产品（如果已经选中），您可以试试这个：

$( document ).ready(function() {

    // get input id
    var item = $('#{!! $product->id !!}');

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

});

从数据库中检索数据 - Laravel

1 个答案: