为什么我得到Uncaught ReferenceError在jQuery中未定义错误

时间:2018-07-16 16:46:11

标签: javascript php jquery html

当我从附加的更新按钮调用updateinventory()函数时,出现“未定义的ReferenceError未定义”错误。我不知道是什么问题。

<script type="text/javascript">
$("i").click(function() {

  var id = this.id;
  var product_code =   $('#pr_code'+id).val();
  var user_id =   $('#user_id'+id).val();
  var qty = $('#qtyspan_'+id).text();

  $('#qtyspan_'+id).css('display', 'none');
  $('#'+id).css('display', 'none');

  $('#simplyupdate'+id).append('<div id="updateinventorydiv'+id+'" class="input-group" style="width: 227px;"><div class="form-group"><input type="hidden"  id="pr_coding" value="'+id+'"/><input value="'+qty+'" type="text" class="form-control input-sm"></div><span class="input-group-btn"><button onclick="updateinventory('+product_code+','+user_id+','+id+')" class="btn btn-success btn-sm" type="button">Update</button><button id="canceldiv_'+id+'" class="btn btn-danger btn-sm" type="button">cancel</button></span></div>');
});

function updateinventory(product_code,user_id,outlet_id) {
  alert(product_code);
}
</script>

PHP文件:这是PHP代码,我在其中创建了3个隐藏的输入以获取JavaScript中的ID。

for ($t = 0; $t < count($outletData); ++$t) {
  $outlet_id = $outletData[$t]->id;
  $outlet_name = $outletData[$t]->name;
  ?>

  <div class="row" style="padding-top: 5px; padding-bottom: 5px;">
    <div class="col-md-3">
      <?php echo $outlet_name; ?>
    </div>
    <div class="col-md-9" id="simplyupdate<?php echo $t; ?>">

      <?php
      $invQty = 0;
      $invQtyData = $this->Constant_model->getDataTwoColumn('inventory', 'product_code', $code, 'outlet_id', $outlet_id);
      if (count($invQtyData) > 0) {
        $invQty = $invQtyData[0]->qty;
      }
      ?>

      <span id="qtyspan_<?php echo $t; ?>"><?php echo $invQty; ?></span>
      <input type="hidden"  id="pr_code<?php echo $t; ?>" value="<?php echo $code; ?>" />
      <input type="hidden"  id="user_id<?php echo $t; ?>" value="<?php echo $user_role; ?>" />
      <input type="hidden"  id="outlet_id<?php echo $t; ?>" value="<?php echo $outlet_id; ?>" />
      <i class="fa fa-pencil" id="<?php echo $t; ?>"></i>
    </div>
  </div>
  <?php
}
?>

1 个答案:

答案 0 :(得分:0)

问题是updateinventory参数没有被引用。

应该是:

<button onclick="updateinventory(\''+product_code+'\',\''+user_id+'\',\''+id+'\')" class="btn btn-success btn-sm" type="button">Update</button>

请注意反斜杠\可以使它们逃脱...相当复杂。 因此,除此之外,这是实现此目标的更好的方法。您使用jQuery ...因此不要使用内联onclick=...

给按钮上课...说update。然后在其上使用delegation,因为它是附加的(动态创建的)。

关于product_codeuser_idid,首先将其存储在data attributes中,然后单击按钮,使用.data()检索值。

我在下面进行了更改...未经测试;)尝试一下。

$("i").click(function() {

  var id = this.id;
  var product_code =   $('#pr_code'+id).val();
  var user_id =   $('#user_id'+id).val();
  var qty = $('#qtyspan_'+id).text();

  $('#qtyspan_'+id).css('display', 'none');
  $('#'+id).css('display', 'none');

  $('#simplyupdate'+id).append('<div id="updateinventorydiv'+id+'" class="input-group" style="width: 227px;"><div class="form-group"><input type="hidden"  id="pr_coding" value="'+id+'"/><input value="'+qty+'" type="text" class="form-control input-sm"></div><span class="input-group-btn"><button data-productcode="'+product_code+'" data-userid="'+user_id+'" data-id="'+id+'" class="btn btn-success btn-sm update" type="button">Update</button><button id="canceldiv_'+id+'" class="btn btn-danger btn-sm" type="button">cancel</button></span></div>');
});

$(document).on("click",".update",function(){
  var product_code = $(this).data("productcode");
  console.log(product_code);
});