Здравствуйте!
Есть такой HTML на странице:
<i id="favorite-{{
post.id }}" onclick="favorite({{
post.id }})" data-feather="star" style="cursor: pointer"></i>
и такой JS:
<script src="
https://unpkg.com/feather-icons"></script>
<script src="
https://unpkg.com/axios/dist/axios.min.js">
const axios = require('axios').default;
</script>
<script>
feather.replace({'color': 'yellow' });
function favorite (id) {
axios.post('/' + id + '/favorite', {
id: id
})
.then(function (response) {
if (!response.data.result || response.data.result) {
let numbered_id = '#favorite-' + id;
$(numbered_id).replaceWith($('<i id="' + numbered_id + '" ' +
'onclick="favorite(' + id + ')" ' +
'data-feather="star" ' +
'style="cursor: pointer"></i>'
));
if (response.data.result === false) {
feather.replace({'color': 'currentColor'});
} else if (response.data.result === true) {
feather.replace({'color': 'yellow'})
}
}
else alert('something wrong with AJAX request.');
})
.catch(function (error) {
console.log(error);
alert('something wrong.');
});
}
</script>
Пытаюсь сделать кнопку добавления в избранное, первое нажатие срабатывает корректно и feather производит замену, а вот при последующих нажатиях замена не происходит.
Подскажите, пожалуйста, что не так?