javascript - 单击链接执行功能？

Question

我想在单击链接后运行一个函数。

我想指向函数的链接是cancelLink类的链接。第一个链接在这里作为示例向您展示我如何获取 AppointmentId 第一个链接通过将参数传递到另一个页面来工作。

我希望能够单击取消链接并在当前页面上运行一个功能。

这是我的链接：

<a href="Invoices/InvoiceCreate.aspx?AppointmentId=${AppointmentId}">Invoice</a>&nbsp;|
<a href="#" class="cancelLink" data-attr=${AppointmentId}>Cancel</a>

下面是我准备好的文档下的点击功能：

$('a.cancelLink').click(function () {
   var appointmentId = $(this).attr("data-attr");
   //var appointmentId = $(this).attr("appointmentId");
   MemberWebService.AppointmentStatusUpdate(appointmentId, 3, function () {

   window.location = 'AppointmentViewAll.aspx';
   });
 });

目前代码没有进入这个点击功能，我怎么能做到这一点？

Answer 1

你的代码对我来说似乎很好。这是一个工作plunk。你试过放一个'console.log("sample test");' 在您的点击处理程序中查看它是否正在触发？您能否也发布一下您是如何将代码包装在 $(document).ready() 中的？

你是这样做的吗？

$(document).ready(function() {
   $('a.cancelLink').click(function () {
       var appointmentId = $(this).attr("data-attr");
       //var appointmentId = $(this).attr("appointmentId");
       MemberWebService.AppointmentStatusUpdate(appointmentId, 3, function () {

       window.location = 'AppointmentViewAll.aspx';
   });
 });
});

Answer 2

试试这个：

$('a.cancelLink').click(function (e) {
  e.preventDefault();
  var appointmentId = $(this).attr("data-attr");
   //var appointmentId = $(this).attr("appointmentId");
   MemberWebService.AppointmentStatusUpdate(appointmentId, 3, function () {

    window.location = 'AppointmentViewAll.aspx';
  });
});

我希望它有帮助。

Answer 3

我发现了一些可能的原因，请参阅我的评论；

HTML

<a href="Invoices/InvoiceCreate.aspx?AppointmentId=${AppointmentId}">Invoice</a>
<a href="#" class="cancelLink" data-attr="${AppointmentId}">Cancel</a> // Use quotes

Javascript

$(document).ready(function() { // Only access elements once the DOM is loaded

  $(document).on('click', 'a.cancelLink', function(event) { // Try using on() instead of click() as you seem to be using some templating for creating the link ("${AppointmentId}").

    event.preventDefault(); // Don´t follow the link to #

    var appointmentId = $(this).data('attr'); // Use data() instead of attr()
    console.log(event.type, appointmentId); // View your console

    MemberWebService.AppointmentStatusUpdate(appointmentId, 3, function() {
       window.location = 'AppointmentViewAll.aspx';
    });
  });

});

请参阅on()和data()。

Answer 4

使用 onclick 方法调用函数并添加参数。

<a href="#" onclick="bindCancel(${AppointmentId})">Cancel</a>

function bindCancel(appointmentId) {
    MemberWebService.AppointmentStatusUpdate(appointmentId, 3, function () {

    });
}