Получить атрибуты отправки ссылки в JQuery

Question

У меня есть форма Razor, в которой есть несколько ссылок, призывающих к действию, и я пытаюсь сжать jQuery. Ссылки таковы:

<a id="approveModal" 
   href="#"
   data-id=""
   data-payload='{"Id":  "@item.Id","projectId": "@item.ProjectId"}'
   data-toggle="modal"
   data-target="#actionConfirmation"
   data-actiontype="approve"
   class="fa fa-thumbs-up fa-2x wfAction">
 </a>

и вызываемая функция выглядит следующим образом:

$(document).on("click", ".wfAction", function () {

    var sender = $(event.target).attr('id');

    var stepId = $("#approveModal").data("payload").Id;
    var projectId = $("#approveModal").data("payload").projectId;

Первоначально я передавал в #approveModal, когда у меня была только одна кнопка, но теперь я пытаюсь назначить событие click для класса по ссылке. Мне нужно получить доступ к отдельным атрибутам в зависимости от того, какая ссылка отправила запрос, но я застрял.

Answer 1

Когда вы связываете событие click с элементом, когда вызывается функция, основной областью действия функции является ваш элемент, поэтому, если вы используете this, вы получите доступ к самому элементу, который вызвал эту функцию , При этом вам просто нужно получить параметры, как вы делали раньше.

ниже приведен пример кода на основе вашего исходного кода.

Кроме того, если вы намереваетесь использовать event, как вы это делали, вам нужно иметь его в качестве параметра function(event){...}

$(document).on("click", ".wfAction", function () {

    var sender = $(this).attr('id');
    var stepId = $(this).data("payload").Id;
    var projectId = $(this).data("payload").projectId;
    console.log(this);    
    console.log('stepId: ' + stepId + ' | projectId: ' + projectId)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="approveModal" 
   href="#"
   data-id="test1"
   data-payload='{"Id":  "1","projectId": "project one"}'
   class="fa fa-thumbs-up fa-2x wfAction">test 1
 </a>
 <br>
 <a id="approveModal1" 
   href="#"
   data-id="test2"
   data-payload='{"Id":  "2","projectId": "project two"}'
   class="fa fa-thumbs-up fa-2x wfAction">test 2
 </a>
  <br>
 <a id="approveModal2" 
   href="#"
   data-id="test3"
   data-payload='{"Id":  "3","projectId": "project three"}'
   class="fa fa-thumbs-up fa-2x wfAction">test 3
 </a>