The question is quite banal, but I need your help.

There is a page, contacts are loaded into it from the database. The contact itself looks like this

<div class="ui cards cardsWrapper"> <div class="card"> <div class="content"> <div id="' + array[i].id + '" class="right floated">' + array[i].id + '</div> <div contenteditable="true" class="header">' + array[i].title + '</div> <div contenteditable="true" class="meta">' + array[i].who + '</div> </div> <div contenteditable="true" class="extra content">' + array[i].description + '</div> <div contenteditable="true" class="extra content">' + array[i].housing + '</div> <div contenteditable="true" class="extra content"> ' + array[i].location + '</div> <div class="extra content center aligned"><button class="ui green button write_changes">Записать</button></div> </div> </div>

such 300 pieces I made their fields editable, but now I can't figure out how to transfer changes to the handler, 300 "Write" buttons, how to distinguish which one was clicked to transfer the edited fields from the card where this button is located? If you track the write_changes button through the class, all fields from all the cards will be overwritten, as it seems to me. You can submit as follows, there are cells in Exel, if you change the cell and click save, then everything is ok, here you can save a button under each card.

  • pure js or jquery? Do you mean how to send ajax post request via js to a php file? - programmer403
  • There is no how to send. I know, the question is how when changing the fields of a card, to understand what button to record was pressed exactly in this card, and not in another. - BoBo

1 answer 1

I do not know if this is the right way. I would hang ONE handler on the parent element for ALL cards. It can be a wrapper or even a body . Like that:

 let wrapper = document.querySelector('.wrapper'); wrapper.addEventListener('click', function(e){ let parent = e.target.parentElement.parentElement; console.log(e.target); // в e.target элемент по которому кликнули. console.log(parent); // }) 
 <div class="wrapper"> <div class="ui cards cardsWrapper"> <div class="card first-card"> <div class="content"> <div id="1" class="right floated">id</div> <div contenteditable="true" class="header">title</div> <div contenteditable="true" class="meta">who</div> </div> <div contenteditable="true" class="extra content">description</div> <div contenteditable="true" class="extra content">housing</div> <div contenteditable="true" class="extra content">location</div> <div class="extra content center aligned"><button class="ui green button write_changes">Записать</button></div> </div> </div> <div class="ui cards cardsWrapper"> <div class="card second-card" > <div class="content"> <div id="2" class="right floated">id</div> <div contenteditable="true" class="header">title</div> <div contenteditable="true" class="meta">who</div> </div> <div contenteditable="true" class="extra content">description</div> <div contenteditable="true" class="extra content">housing</div> <div contenteditable="true" class="extra content">location</div> <div class="extra content center aligned"><button class="ui green button write_changes">Записать</button></div> </div> </div> <div class="ui cards cardsWrapper"> <div class="card third-card"> <div class="content"> <div id="3" class="right floated">id</div> <div contenteditable="true" class="header">title</div> <div contenteditable="true" class="meta">who</div> </div> <div contenteditable="true" class="extra content">description</div> <div contenteditable="true" class="extra content">housing</div> <div contenteditable="true" class="extra content">location</div> <div class="extra content center aligned"><button class="ui green button write_changes">Записать</button></div> </div> </div> </div>

  • and what does the function accept ?? What does e know? - BoBo
  • The function accepts an event. You can call it whatever you like, just taken like this - Igor Lut
  • It turns out I need to wrap each button in a div, add a custom attribute of the type of your data-id to it, then hang up the handler on the entire document and catch the changes? - BoBo
  • You can do nothing of this. And just hang the handler on the parent element. And to get access to the <div class="card"> element at which the event worked - you can do this: let parent = e.target.parentElement.parentElement; - Igor Lut
  • did not understand (maybe there is a link where to read? - BoBo