Search result breaks delete action - laravel

Question

I have a page where I display campaigns. I wont show all the code but the basic structure is like so
#foreach ($campaigns as $campaign)
{!! Form::open(array('class' => 'form-inline delete', 'method' => 'DELETE', 'route' => array('campaigns.destroy', $campaign->id))) !!}
<div class="panel panel-default">
#if (!empty($campaign->campaignName))
<div class="panel-heading campaignPanelHeading">
<h4>{{ $campaign->campaignName }}</h4>
</div>
<div class="panel-footer">
<a href="{{ route('campaigns.destroy', $campaign->id) }}" class="btn btn-danger" id="deleteCampaign" data-method="delete" data-token="{{ csrf_token() }}">
Delete
</a>
</div>
#endif
</div>
{!! Form::close() !!}
#endforeach
If I try to delete an item, the following is triggered.
$("#deleteCampaign").on("submit", function(){
return confirm("Do you want to delete this item?");
});
Now on this page where I display all campaigns I have a search box. You start typing and an autocomplete list displays. When you select an option, this is triggered
select: function (event, ui) {
$.ajax({
url: "/returnDataForCampaigns",
type: "GET",
datatype: "html",
data: {
value : ui.item.value
},
success: function(data) {
$('.container').html(data.html);
$('.selectpicker').select2();
}
});
},
This essentially calls a function which gets the selected Campaign, and injects it into the following partial
#if(!empty($campaign))
{!! Form::open(array('class' => 'form-inline delete', 'method' => 'DELETE', 'route' => array('campaigns.destroy', $campaign->id))) !!}
<div class="panel panel-default">
#if (!empty($campaign->campaignName))
<div class="panel-heading campaignPanelHeading">
<h4>{{ $campaign->campaignName }}</h4>
</div>
<div class="panel-footer">
<a href="{{ route('campaigns.destroy', $campaign->id) }}" class="btn btn-danger" id="deleteCampaign" data-method="delete" data-token="{{ csrf_token() }}">
<span class="glyphicon" aria-hidden="true"></span>
Delete
</a>
</div>
#endif
</div>
{!! Form::close() !!}
#endif
Finally, this data is then injected into the page's container. Now this all works fine. When I check the source after it has been injected everything looks correct.
I have 2 other buttons which I removed above which show or edit the campaign, these work fine. The thing that is not working is the delete button for the searched campaign. For some reason when I click this it goes to the campaigns show page. This button works when I display all campaigns, its only when search is performed it does not work.
I have checked the code for the delete button for when all campaigns are displayed vs a searched campaign. Everything is the same apart from the Javascript which has been applied to the delete button when all campaigns are shown as well as some hidden inputs
<a data-token="dsfsd" data-method="delete" id="deleteCampaign" class="btn btn-danger" onclick=" if ($(this).hasClass('action_confirm')) { if(confirm($(this).data('message') || "Are you sure you want to do this?")) { $(this).find("form").submit(); } } else { $(this).find("form").submit(); }">
Delete
<form style="display:none" method="POST" action="http://localhost:8000/campaigns/43">
<input type="hidden" value="delete" name="_method">
<input type="hidden" value="dsfsd" name="_token">
</form>
</a>
This is a searched button
<a data-token="dsfsd" data-method="delete" id="deleteCampaign" class="btn btn-danger" href="http://localhost:8000/campaigns/9">
Delete
</a>
So my main question is why this may be happening? I would also like to try and find out why the searched version of the delete button also takes you to the show page?
Any advice appreciated
Thanks

Answer 1

Try this for your delete jquery code:
$(document).on("submit", "#deleteCampaign", function(e){
e.preventDefault();
return confirm("Do you want to delete this item?");
});
Its because you are adding content after DOM load.