Question

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

Popup event

此点击事件仅发生一次。因为表的内容是动态的，所以我使用循环来呈现HTML，最后<td>为button 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背后的理由是在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％肯定。我会张贴图片，但我没有足够的声誉来展示这一点。

感谢阅读这么长的帖子，我想彻底。

Answer 1

答案： 你需要改变的东西不多：

 mMap.addMarker(new MarkerOptions()
                        .title("My Location")
                        .icon(BitmapDescriptorFactory.fromResource(R.drawable.myloc))
                        .anchor(0.0f, 1.0f) // Anchors the marker on the bottom left
                        .position(new LatLng(lat, lon)))
                        .setDraggable(true);

原因： 当您function createCallback(i) { return function () { $('#whisper' + i).bPopup(); } }某个bPopup()个对象时，jquery会获取该元素，而会移动。这有多讨厌？

但它并没有将它移回原来的位置。

这意味着，在您点击一次事件后，bPopup不再包含您要查找的元素。相反，它位于页面的底部。

因此，您必须全局查找该元素。由于您搜索的是btn.parent代码，而不是id代码，因此在body标记中查找代码可能会提高效率，因为您需要的方法较少（class等。），但我没有检查。

更新了小提琴：https://jsfiddle.net/vajwcy6y/7/

点击事件只触发一次JQuery / bPopup

1 个答案: