调用与变量ID链接jQuery函数点击

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函数调用函数updateStatus和deleteStatus jQuery的？我已经写了下面的代码，但它不是工作，这是行不通的：

<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> 

其中$（ “＃DSR-数据”）HTML（dsrData ）;分配。

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

请帮我解决这个问题。 在此先感谢。

Answer 1

只是不要在HTML中使用onclick属性，如你使用jQuery的扩展属性，你可以使用jQuery的正确，就可以由共同的类action添加类delete和upload。

你的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')) { 
 
\t $(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>

希望这有助于！

Answer 2

你可以试试这个。

<script> 
    function uploadStatus(id) { 
     alert('id =' + id); 
    } 

    function deleteStatus(id) { 
     alert('id =' + id); 
    } 
</script>