未捕獲的ReferenceError：checkin未在HTMLButtonElement.onclick處定義

Question

我在按鈕單擊時遇到js函數的問題。

<button class="checkin_button btn-block" onclick="checkin(345)"><i class="fa fa-map-marker"></i> Check In</button> 

我jQuery的功能是：

var CheckIn; 
$(document).ready(function() { 
    CheckIn = function checkin(id) { 
    jQuery.ajax({ 
     type: 'POST', 
     url: ajaxurl, 
     data: { 
     action: 'foody_checkin', 
     'restaurant' = id, 
     }, 
     beforeSend: function() {}, 
     success: function() {} 
    }); 
    } 
}); 

但它不工作。

Answer 1

checkin(345)是一個函數，所以做象下面這樣： -

function checkin(id){ 
    var ajaxurl = "abc.com" //an example that you have to define ajaxurl before using it 
    jQuery.ajax({ 
     type : 'POST', 
     url : ajaxurl, // now you can use ajaxurl happily 
     data : { 
      action : 'foody_checkin', 
      'restaurant': id, // : needed instead of = 
     }, 
     beforeSend : function(){}, 
     success : function(){} 
    }); 
} 

注： -

1，請照顧內部報價的書面意見。

2.Also檢查jQuery庫您之前添加腳本代碼

Answer 2

嘗試使用數據ID方法 HTML

<button class="checkin_button btn-block" data-id='345'><i class="fa fa-map-marker"></i> Check In</button> 

jQuery的

$(document).on('click', '.checkin_button', function() { 
    var id = $(this).data('id'); 
    console.log(id); 
    // write your ajax below 
}); 

這裏是工作的jsfiddle： https://jsfiddle.net/nuxtw2ft/

Answer 3

您需要使用這個關鍵字賦值給聲明的var。點擊按鈕調用相同的方法。

AlivetoDie在他的回答中指出，還要爲ajaxurl賦值。

您可以運行下面的代碼片段並進行驗證。

var CheckIn; 
 
$(document).ready(function() { 
 
    var ajaxurl="yourservice.com" 
 
    this.CheckIn = function checkin(id) { 
 
    console.log("CheckIn function called on click"); 
 
    jQuery.ajax({ 
 
     type: 'POST', 
 
     url: ajaxurl, 
 
     data: { 
 
     action: 'foody_checkin', 
 
     'restaurant': id, 
 
     }, 
 
     beforeSend: function() {}, 
 
     success: function() {} 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="checkin_button btn-block" onclick="CheckIn(345)"><i class="fa fa-map-marker"></i> Check In</button>

希望這有助於！