Question

您好我关注html：

<table class="table table-bordered">
        <thead>
          <tr>
            <th>Docket No. #</th>
            <th>Del Date</th>
            <th>Box</th>
            <th>Status</th>
            <th>Update</th>
          </tr>
        </thead>
        <tbody id="dsr-data">
        </tbody>
    </table>

如何定义jQuery函数来调用jQuery中的函数updateStatus和deleteStatus？我写了下面的代码，但它不起作用：

<script type="text/javascript">
$( document ).ready(function() {
$(function()
{
    $.getJSON("DsrList.php",{page:"dsrlist",request:  
    "dsrData"},function(json)
    {
        var response = json.response;
        var screen = response.screen;
        var session = response.session;
        var branch = session.branch;
        var username = session.username;
        var dsrNo = session.dsr_no;
        var dsrData = session.dsrData;
        if(screen == "dsrlist"){
            $("#dsr-branch").text(branch);
            $("#dsr-user").text(username);
            $("#dsr_no").text(dsrNo);
            $("#dsr-data").html(dsrData);
        }
    });
});

$(function(){

$.fn.extend({
 uploadStatus: function () {
 var id = $(this).attr('id');
 id = id.replace("upload-", "");
    alert(id);
 }
});

$.fn.extend({
 deleteStatus: function () {
 var id = $(this).attr('id');
 id = id.replace("delete-", "");
    alert(id);
 }
});

$('.action').on('click', function(e) {
if($(this).hasClass('upload')) {
  $(this).uploadStatus();
} else {
  $(this).deleteStatus();
 }
});

});
});
</script>

DsrList.php正在填充以下数据：

<tr>
 <td>812210</td>
 <td>03-12-2016</td>
 <td>10</td>
 <td>out for delivery</td>
 <td>
   <a class="action upload" id="upload-1">
    <img src="img/upload.png" alt="Upload"></a>
  <a class="action delete" id="delete-1">
    <img src="img/delete.png" alt="Delete"></a>
 </td>
</tr>
<tr>
 <td>812211</td>
 <td>03-12-2016</td>
 <td>20</td>
 <td>out for delivery</td>
 <td>
   <a class="action upload" id="upload-2">
    <img src="img/upload.png" alt="Upload"></a>
   <a class="action delete" id="delete-2">
    <img src="img/delete.png" alt="Delete"></a>
 </td>
</tr>

哪个$（＆＃34; #dsr-data＆＃34;）。html（dsrData）;分配。

但点击更新/删除图片后，我没有收到警报。

请帮我解决这个问题。提前谢谢。

Answer 1

不要在HTML中使用onclick属性，因为您正在使用jQuery的扩展属性，您可以正确使用jQuery，您可以添加类delete和upload课程action是共同的。

您的HTML应该是这样的：

<a class="action upload" id="upload-1">
    <img src="img/upload.png">
</a>
<a class="action delete" id="delete-1">
    <img src="img/delete.png">
</a>

并简单地使用jQuery的onClick事件处理程序和hasClass方法来了解所单击的块是用于上传还是删除。为了更好地理解，请参阅以下代码：

你可以这样做：

$(function(){

  $.fn.extend({
     uploadStatus: function () {
        alert('Upload Block Clicked : id = ' + $(this).attr('id'));
     }
  });
  
  $.fn.extend({
     deleteStatus: function () {
        alert('Delete Block Clicked: id = ' + $(this).attr('id'));
     }
  });
  
  $(document).on('click', '.action', function(e) {
    if($(this).hasClass('upload')) {
	  $(this).uploadStatus();
    } else {
      $(this).deleteStatus();
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Docket No. #</th>
      <th>Del Date</th>
      <th>Box</th>
      <th>Status</th>
      <th>Update</th>
    </tr>
  </thead>
  <tbody id="dsr-data">
    <tr>
      <td>812210</td>
      <td>2016-12-03</td>
      <td>10</td>
      <td>out for delivery</td>
      <td>
        <a class="action upload" id="upload-1">
        <img src="img/upload.png" alt="Upload">
        </a>
        <a class="action delete" id="delete-1">
        <img src="img/delete.png" alt="Delete">
        </a>
      </td>
    </tr>
  </tbody>
</table>

希望这有帮助！

在变量id click的链接上调用jQuery函数

1 个答案: