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.在脚本代码

之前，还要检查是否添加了jQuery库

Answer 2

尝试使用data-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

您需要使用 this 关键字为声明的var赋值。点击按钮即可调用相同的内容。

同样为AlivetoDie在答案中说明的ajaxurl值。

您可以运行下面的代码段并验证。

＆＃13;

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() {}
    });
  }
});

＆＃13;

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

＆＃13;

希望这有帮助！

未捕获的ReferenceError：HTMLButtonElement.onclick中未定义checkin

3 个答案: