0

I have a btn that when clicked its open popover with three other btn. One of them should trigger Ajax. I'm using data-html="true" in order to set the btn inside the popover. I added a onclick to the delete btn in the popover, but when running the page its just wont appear in the tag, the same with href="javascript:function()".

Any Idea what I can do to call Js function from the btn inside the popover? Html:

<a href="#" class="secondary" role="button" id="mealbtn" data-toggle="popover" data-placement="top" data-content='<div class="btn-group btn-group-sm" style="padding:0px;"><a href="/Meal/Recipe?conid=@item.id&recipeid=@Model.recipesCon.Where(c => c.mealId == item.mealId).First().RecipeId" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-info-sign"></span></a><a href="/Meal/DinnerMeal/@item.id" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil"></span></a><a class="btn btn-danger" id="delete-meal-btn" href="#@item.id"><span class="glyphicon glyphicon-trash"></span></a></div>' data-html="true" title="@Model.recipesCon.Where(c => c.mealId == item.mealId).First().Recipe.name" ><span class="glyphicon glyphicon-apple"></span></a>

Js try:

$('#delete-meal-btn').click(function () {
        alert('btn clicked');   });
  • No... now close... –  May 01 '20 at 09:23
  • 1
    Well, I think it does. `$(document).on('click', '#delete-meal-btn', function() { });` is probably what you need. It listens for all clicks in the document and triggers whenever the element with that ID has been clicked. This example is present in the duplicate link. – Emiel Zuurbier May 01 '20 at 09:30
  • Its working. Any idea why $('#delete-meal-btn').click didnt worked? –  May 01 '20 at 09:35
  • 1
    Sure, it's because your example listens for a click on elements that are currently present in your document. But your button is generated from a string and therefor did not exist prior to the event listener. – Emiel Zuurbier May 01 '20 at 09:37
  • oo ok, thanks for the help! –  May 01 '20 at 10:07

1 Answers1

0

As @Emiel Zuurbier suggested this forkes for me:

$(document).on('click', '#delete-meal-btn', function() { });