I have list on my website like this:
<ul id="listProfiles" class="list-group">
@foreach($profiles as $profile)
<li class="list-group-item" profileId="{{ $profile['id'] }}">{{ $profile['name'] }}</li>
@endforeach
</ul>
<div id="profileResult"></div>
When I add new element to this list using function below:
$("#addNewProfileButton").on("click", function () {
profileName = $("#newProfileInput").val();
$("#newProfileInput").val('');
$.ajax({
method: 'GET',
data: {
profileName: profileName
},
url: '/addNewProfiles'
}).success(function (newProfile) {
console.log(newProfile);
$("#listProfiles li:last").after('<li class="list-group-item" profileId="' + newProfile.id + '">' + newProfile.name + '</li>');
}).error(function (msg) {
console.log(msg);
});
});
it's added properly but not clickable using this:
$("#listProfiles li").click(function () {
profileId = $(this).attr('profileId');
$.ajax({
method: 'GET',
data: {
profileId: profileId
},
url: '/spiderProfileDetails'
}).success(function (msg) {
$('#profileResult').html(msg);
}).error(function (msg) {
console.log(msg);
});
});
All other elements are clickable. New element becomes clickable after refreshing the website. How to make it work without refreshing?