Jquery數據屬性值未定義

Question

HTML：

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal()"><i class="fa fa-envelope"></i></button>

jQuery的：

function show_modal(){
    alert($(this).data("type"));
    $('#basic').modal('show'); 
}

輸出：

Undefined

預期產出：

Invoice Generate

任何人都可以告訴我為什么它提醒未定義，我該如何解決？

Answer 1

你show_modal函數不知道$(this)是什么。 所以this添加到onclick="show_modal()"就像onclick="show_modal(this)"

那么你當然必須更新你的功能以及如下：

function show_modal(obj){
    alert($(obj).data("type"));
    $('#basic').modal('show'); 
}

 function show_modal(obj){ alert($(obj).data("type")); $('#basic').modal('show'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal(this)"><i class="fa fa-envelope"></i></button> 

Answer 2

你正在調用函數你必須通過這將函數

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal()"><i class="fa fa-envelope"></i></button>

在JS中

function show_modal(ob){
    alert($(ob).data("type"));
    $('#basic').modal('show'); 
}

Answer 3

或者，如果你想使用$(this)將一個事件處理程序附加到元素，使用它的類或id，就像這樣。

$('.filter-submit').on('click', function(){
  alert($(this).data("type"));
})

 $('.filter-submit').on('click', function() { alert($(this).data("type")); //$('#basic').modal('show'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate"><i class="fa fa-envelope"></i>Show</button> 

Answer 4

希望這是您的解決方案

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal(this)"><i class="fa fa-envelope"></i></button>

<script>
   function show_modal(ele){

      alert($(ele).data("type"));
      $('#basic').modal('show'); 
   }
</script>