CODEWITHSUNDEEP
jqueryjquery-selectors
DatsunBing
DatsunBing

Reputation: 9076

jQuery event delegation and ancestors

I have several <span> elements in a table cell. For each span, when the user clicks on it I am using event delegation to fire off an ajax request. (The function that traps the event is bound to the table cell).

The problem is that the ajax call needs to include a table row identifier and I'm not sure where to store this identifier, or how to reference and use it.

For example, say each row in the table represents a Person, then when the user clicks on a span in that row, the ajax call needs to include personId.

Should personId be a class attibute of the row (e.g. <tr class='person-id-123'>...)? Or perhaps an id (e.g. <tr id='person-id-123'>...)? And how do I reference and use that in the function that catches the click event?

Thanks!

Upvotes: 2

Views: 125

Answers (2)

pathak tejpal
pathak tejpal

Reputation: 837

for this you can use ID,class anything because from jquery we can get value. but it will be better if you use Data attribute.

now here for your span

<span data-person-key="47" class="spanclass">
</span>

and from jquery you can get that value like this.

$(document).on("click",".spanclass",function(){
  var personKey = $(this).data("person-key");
  $.ajax({
    url: "whatever you url is. if its asp.net then method of controller will be here.or may be php page",
    type: "POST",
    data: {Personid : personKey },
    success://whatever you want to code in success,
    error://whatever you want to code in error
  });
});

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

Use HTML5 dataset attributes

<tr data-person-id=123>

$(".tr-parent").on('click', 'tr', function () {
    //$(this).data('person-id') is also valid
    ajaxRequest(this.dataset.personId);
});

Upvotes: 2

Related Questions