单击事件仅触发一次JQuery / bPopup

我正在ASP.NET MVC中制作一个Web应用程序，该Web应用程序从网站获取信息，将其放入数据库表中，并将其显示为HTML中的表元素。每行表的最后一列是一个click事件，该事件使用bPopup弹出一个窗口，该窗口本质上总结了该特定行的内容。这是表格和弹出事件。编辑JS Fiddle链接而不是表格图片：https : //jsfiddle.net/vajwcy6y/3/

弹出事件

此点击事件仅发生一次。由于表的内容是动态的，因此我使用循环来渲染HTML，最后一个<td>是buttonwith id = "my-button@(counter)"，<div>右边是带有的id=whisper@(counter)，class="popup"在此处显示（在底部）

<table id ="mytable"class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.IGN)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.currencyType)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.currencyAmount)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.itemName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.uri)
    </th>
    <th></th>
</tr>
@{int counter = 0; }
@foreach (var item in Model)
{
    counter += 1;

    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.IGN)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.currencyAmount)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.currencyType)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.itemName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.uri)
        </td>
        <td>
            <a id="my-button@(counter)" href="#" class="btn btn-large">
               <i class="fa fa-reply-all"></i>Whisper Player</a>
            <div id="whisper@(counter)" class="popup">

            </div>

        </td>
    </tr>
}

然后，我在页面末尾调用脚本，如下所示：

<script>createPopup(@(counter))</script>
<script>assignPopup(@(counter))</script>

这样做：

function createPopup(counter) {

for (var i = 0 ; i <= counter; i++) {

    var intro = 'To whisper this player copy and paste this line:@';

    var nameSelector = $("#mytable tr:eq(" + i + ") td:first-child").text();

    var messageStart = 'Hi, I would like to buy your ';

    var itemName = $("#mytable tr:eq(" + i + ") td:nth-child(4)").text();

    var price = ' listed for ' + $("#mytable tr:eq(" + i + ") td:nth-child(2)").text() + ' ' + $("#mytable tr:eq(" + i + ") td:nth-child(3)").text();

    $('#whisper' + i).append(intro + nameSelector + messageStart + itemName + price);
}
};

function createCallback(i) {
return function () {
    $(this).parent().find('#whisper' + i).bPopup();
   }
}

function assignPopup(counter) {
    for (var i = 0; i <= counter; i++)
    {
        $('#my-button' + i).on('click', createCallback(i));

    }
};

我在此JS背后的理由是动态分配on click events。看起来很古怪，但是成功了一半。

这是我的CSS

.popup { font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;
         background-color:#fff;
         border-radius:15px;
         color:#000;
         display:none; 
         padding:20px;
         width:500px;
         min-height: 180px;}

我最终注意到的是，<div>最后一行的内容可以正确呈现，但是当我单击它时，它将获得内联CSS样式，并移至HTML代码的底部。我怀疑这是问题所在，但我不确定100％。我会发布图片，但是我没有足够的声誉来展示这一点。

感谢您阅读这么长的文章，我想做的很透彻。