how to grab data-value from li tag with jquery after ajax success

Asked Jan 23 '19 at 09:54

Active Jan 23 '19 at 09:55

Viewed 24 times

For grabbing a value from a li tag and putting into an input filed i use the data-value. My list tags look like this:

<li class="set-value" data-value="test">grab value</li>

The js:

$(".set-value").click(function(){           
       var s = this.dataset.value;                         
       $(".set-input").val(s);
});

My input field looks like this:

<input class="set-input" type="text" value="" />

When click on grab value it puts test in to the input.! That works fine! When i do submit the value, i use an ajax call. After the ajax call, all li tags are dynamically reloaded. Problem is: when i click again on test, sending the value to the input field does not work anymore. After a hard refresh, it DOES work again. I checked the following after the ajax:

jquery core file is still loaded
the js is still in the DOM

So why it does not work anymore for the second time?

edited Jan 23 '19 at 09:55

asked Jan 23 '19 at 09:54

Jack Maessen

1,780
4
19
51

1

As the `li` elements are removed and recreated by the result of the AJAX request you need to use a delegated event handler. See the duplicate for more information – Rory McCrossan Jan 23 '19 at 09:55
the `li` tags are not removed! All the list tags are reloaded after the ajax call – Jack Maessen Jan 23 '19 at 10:03
1

As mentioned, read the linked article. But quick answer: use `$(document).on('click','.set-value',function(){` instead. – Panomosh Jan 23 '19 at 10:04
2

That's the same thing. You can't 'reload' HTML. You destroy the elements that are there and recreate. – Rory McCrossan Jan 23 '19 at 10:04
I agree @Rory! This solved the problem! Thnx – Jack Maessen Jan 23 '19 at 10:14

how to grab data-value from li tag with jquery after ajax success

0 Answers0