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);
});

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

1 个答案: