jq動態生成的元素(標籤)新增點選事件

不寫bug的怪獸星人發表於2017-12-14

1.在dataTable表格中根據傳來的資料動態生成a標籤
Columns:最後一列

js部分:
<script>
var ListTable = loadDataTable({
{},
{},
...
 {
   data: "orderId", width: "25%", render: function (data, type, row) {
   if(row.data=='1' ){
        return '<a id="test" href="javascript:;" data-setX="2" data-setY="'+data+'">'+'確認'+'</a>';
    }   
  }
 });
 ...
 </script>

2.在前臺頁面審查元素看到的a標籤是

<a id="test" href="javascript" data-setX="2" data-setY=""></a>

這裡ajax傳來的資料用bootstrap自定義屬性”data-XXX”來獲取賦值,所以想在後臺通過jq來獲取data-XXX得到的值 :

$(document).on("click","#test",function(){
    var value1 = $(this).data("setX");
    var value2 = $(this).data("setY");
    //value1 = 1;
});

該繫結方法因為父級元素範圍過大容易造成事件冒泡(點選子元素會也點選了父元素的變化),所以直接定義function,在元素中繫結onclick=”“事件也可以
上面的data-setX中”setX”就是自定義的屬性,可以在js中獲取到,但獲取時需要區分大小寫,而且會因為快取原因資料不能及時重新整理。

相關文章