对于使用JQuery加载的Id，单击使用JQuery时发出警报_Jquery_Click_Onload

对于使用JQuery加载的Id，单击使用JQuery时发出警报

jquery

对于使用JQuery加载的Id，单击使用JQuery时发出警报,jquery,click,onload,Jquery,Click,Onload,当用户单击id减去图像中显示的\u 1\u 36的div时，它应该提醒hi。但它不警觉。控制台中没有错误 new_invoice_table.php：函数get_table（）{ $（“#siteloader”）.load（'new_invoice_table_ajax.php'）） } $（'#减去_1_36'）。单击（函数（）{ 警报（“hi”）； }); 新的\u发票\u表格\u ajax.php：服务量服务名称 3. 应该在加载DOM后加载脚本点击我函数g

当用户单击id减去图像中显示的\u 1\u 36的div时，它应该提醒hi。但它不警觉。控制台中没有错误

new_invoice_table.php：



函数get_table（）{
$（“#siteloader”）.load（'new_invoice_table_ajax.php'））
}
$（'#减去_1_36'）。单击（函数（）{
警报（“hi”）；
});

新的\u发票\u表格\u ajax.php：


服务
量
服务名称
3.

应该在加载DOM后加载脚本



点击我
函数get_table（）{
$（“#siteloader”）.load（'new_invoice_table_ajax.php'））
}
$（'#减去_1_36'）。单击（函数（）{
警报（“hi”）；
});

如果我们将

单击（）

放在新的\u发票\u表\u ajax.php中，它会起作用

new_invoice_table.php：



函数get_table（）{
$（“#siteloader”）.load（'new_invoice_table_ajax.php'））
}

新的\u发票\u表格\u ajax.php：


服务
量
服务名称
3.
$（'#减去_1_36'）。单击（函数（）{
警报（“hi”）；
});

如果在加载DOM后附加任何元素，则可以使用

delegate（）

选择器

$（“body”）.delegate（“#减去_1_36”，“单击”，function（）{}）

，因为在加载页面后，表将使用

load（）

加载

function get_table() {
  $("#siteloader").load('new_invoice_table_ajax.php')
}
$("body").delegate('#minus_1_36', 'click',function() {
  alert("hi");
});

您可以在

单击我

中查看delegate（）选择器的所有详细信息这应该在另一页上，而不是在同一页上！将js代码放入一个外部脚本中，并在新的\u invoice\u table\u ajax.php文件中包含带有src路径的脚本标记。还是休息吧。在DOM后面包含脚本标记，或者在脚本中使用$（document）.on（）方法，并将脚本加载到新的\u invoice\u table\u ajax.php文件中的任意位置。

<table class="table table-striped table-hover table-bordered">
  <thead class="text-center">
    <tr>
      <th>Service</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tr>
    <td>Service Name</td>
    <td class="d-flex justify-content-between align-items-center p-0">
      <div id="minus_1_36" class="fas fa-caret-square-down fa-3x"></div><span>3</span>
      <a href="" class="fas fa-caret-square-up fa-3x"></a>
    </td>
  </tr>
</table>

<!DOCTYPE html>
<html lang="en">

<head>

  <link href="http://localhost/project/css/bootstrap.css" rel="stylesheet" />
  <link rel="stylesheet" href="http://localhost/project/fontawesome/fontawesome/css/all.css">

</head>

<body>
  <div id="siteloader"></div>
  <script src="http://localhost/project/js/jquery.min.js"></script>
  <script src="http://localhost/project/js/popper.min.js"></script>
  <script src="http://localhost/project/js/bootstrap.js"></script>
  <script>
    function get_table() {
      $("#siteloader").load('new_invoice_table_ajax.php')
    }
  </script>
</body>
</html>

<table class="table table-striped table-hover table-bordered">
  <thead class="text-center">
    <tr>
      <th>Service</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tr>
    <td>Service Name</td>
    <td class="d-flex justify-content-between align-items-center p-0">
      <div id="minus_1_36" class="fas fa-caret-square-down fa-3x"></div><span>3</span>
      <a href="" class="fas fa-caret-square-up fa-3x"></a>
    </td>
  </tr>
</table>
<script>
    $('#minus_1_36').click(function() {
      alert("hi");
    });
  </script>

function get_table() {
  $("#siteloader").load('new_invoice_table_ajax.php')
}
$("body").delegate('#minus_1_36', 'click',function() {
  alert("hi");
});