ASP 核心 - jquery 总是返回数据 - url 来自第一次点击的控件

Question

在我的网页上，我想使用某种通用的弹出控件，这样我就可以在整个站点中使用它（在部分视图中加载）。为此，在 _Layout 中包含以下代码：

<div class="modal fade" id="modalGeneric" role="dialog">
</div>

<script>
function showGenericModal() {
    // get the event source
    event = event || window.event;
    var src = event.target || event.srcElement;

    // find the parent that contains proper decorations
    var url = $(src).closest("*[data-url]").data('url');

    // trigger an HTTP GET
    $.get(url, function (data) {
        // fill content and show modal
        $('#modalGeneric').html(data);
        $('#modalGeneric').modal('show');

    });
}
</script>

然后我在要显示弹出窗口的控件中使用 data-url 属性和 showGenericModal()。这工作正常，但不是在 table 行中。例如，如果我像这样在 table 行的末尾放置一个图标：

<td>
    <a class="ml-1" href="#" data-toggle="tooltip" title="Delete" 
       data-url="@Url.Action("DeletePartial", "Clients", new { id = @client.IdClient })" 
       onclick="showGenericModal();">

        <svg id="delete" xmlns="http://www.w3.org/2000/svg" width="19" height="21" fill-rule="evenodd" stroke-miterlimit="1.41" clip-rule="evenodd" stroke-linejoin="round"> 
            <path class="table-icon" d="M17.08 7.4h-1.25v12.1c0 .7-.56 1.25-1.25 1.25H3.75c-.7 0-1.25-.56-1.25-1.25V7.4H1.25C.55 7.4 0 6.86 0 6.17c0-.7.56-1.25 1.25-1.25H5C5 2.6 6.87.76 9.17.76s4.16 1.86 4.16 4.16h3.75c.7 0 1.25.57 1.25 1.26 0 .7-.56 1.25-1.25 1.25zM8.33 18.26H10v-10H8.33v10zM5 8.26v10h1.67v-10H5zM9.17 2.4c-1.38 0-2.5 1.13-2.5 2.5h5c0-1.37-1.12-2.5-2.5-2.5zm4.16 5.85h-1.66v10h1.66v-10z" />
        </svg>
    </a>

</td>

第一次单击一行时，弹出窗口 (url) 会按预期工作（可以说它是“/Clients/DeletePartial/1”），但在关闭弹出窗口并单击任何其他行后将总是导致传递相同的数据-url (Clients/DeletePartial/1).

我还检查了生成的 html 并且所有 'data-url' 都是正确的：

<a class="ml-1" href="#" data-toggle="tooltip" title="Delete" 
    data-url="/Clients/DeletePartial/1" onclick="showGenericModal();">
    <svg id="delete" xmlns="http://www.w3.org/2000/svg" width="19" height="21" fill-rule="evenodd" stroke-miterlimit="1.41" clip-rule="evenodd" stroke-linejoin="round">
        <path class="table-icon" d="M17.08 7.4h-1.25v12.1c0 .7-.56 1.25-1.25 1.25H3.75c-.7 0-1.25-.56-1.25-1.25V7.4H1.25C.55 7.4 0 6.86 0 6.17c0-.7.56-1.25 1.25-1.25H5C5 2.6 6.87.76 9.17.76s4.16 1.86 4.16 4.16h3.75c.7 0 1.25.57 1.25 1.26 0 .7-.56 1.25-1.25 1.25zM8.33 18.26H10v-10H8.33v10zM5 8.26v10h1.67v-10H5zM9.17 2.4c-1.38 0-2.5 1.13-2.5 2.5h5c0-1.37-1.12-2.5-2.5-2.5zm4.16 5.85h-1.66v10h1.66v-10z" />
    </svg>
</a>

<a class="ml-1" href="#" data-toggle="tooltip" title="Delete" 
    data-url="/Clients/DeletePartial/2" onclick="showGenericModal();">
    <svg id="delete" xmlns="http://www.w3.org/2000/svg" width="19" height="21" fill-rule="evenodd" stroke-miterlimit="1.41" clip-rule="evenodd" stroke-linejoin="round">
        <path class="table-icon" d="M17.08 7.4h-1.25v12.1c0 .7-.56 1.25-1.25 1.25H3.75c-.7 0-1.25-.56-1.25-1.25V7.4H1.25C.55 7.4 0 6.86 0 6.17c0-.7.56-1.25 1.25-1.25H5C5 2.6 6.87.76 9.17.76s4.16 1.86 4.16 4.16h3.75c.7 0 1.25.57 1.25 1.26 0 .7-.56 1.25-1.25 1.25zM8.33 18.26H10v-10H8.33v10zM5 8.26v10h1.67v-10H5zM9.17 2.4c-1.38 0-2.5 1.13-2.5 2.5h5c0-1.37-1.12-2.5-2.5-2.5zm4.16 5.85h-1.66v10h1.66v-10z" />
    </svg>
</a>

<a class="ml-1" href="#" data-toggle="tooltip" title="Delete" 
    data-url="/Clients/DeletePartial/3" onclick="showGenericModal();">
    <svg id="delete" xmlns="http://www.w3.org/2000/svg" width="19" height="21" fill-rule="evenodd" stroke-miterlimit="1.41" clip-rule="evenodd" stroke-linejoin="round">
        <path class="table-icon" d="M17.08 7.4h-1.25v12.1c0 .7-.56 1.25-1.25 1.25H3.75c-.7 0-1.25-.56-1.25-1.25V7.4H1.25C.55 7.4 0 6.86 0 6.17c0-.7.56-1.25 1.25-1.25H5C5 2.6 6.87.76 9.17.76s4.16 1.86 4.16 4.16h3.75c.7 0 1.25.57 1.25 1.26 0 .7-.56 1.25-1.25 1.25zM8.33 18.26H10v-10H8.33v10zM5 8.26v10h1.67v-10H5zM9.17 2.4c-1.38 0-2.5 1.13-2.5 2.5h5c0-1.37-1.12-2.5-2.5-2.5zm4.16 5.85h-1.66v10h1.66v-10z" />
    </svg>
</a>

etc.

...那么为什么我总是得到第一个单击控件的 url（直到完成页面 refresh/reload）？

Answer 1

实际回答“为什么会这样？

第

行

event = event || window.event;

全局变量 event 已创建并分配给它 window.event。在处理程序的后续调用期间，event 变量已设置为第一次单击的元素引用，因此此行不会更改 event 值（因为 event 这次不为空并且表达式将 return 它的价值）。最简单的修复方法是将此代码更改为以下内容

var event = window.event;

其他可能的解决方案

根据MDN

The read-only Window property event returns the Event which is currently being handled by the site's code. Outside the context of an event handler, the value is always undefined.

You should avoid using this property in new code, and should instead use the Event passed into the event handler function. This property is not universally supported and even when supported introduces potential fragility to your code.

所以你不应该使用 window.event 魔法而只是 event 对象到事件处理程序

JS

function showGenericModal(event) {
    var src = event.target || event.srcElement;

    // find the parent that contains proper decorations
    var url = $(src).closest("*[data-url]").data('url');

    // trigger an HTTP GET
    $.get(url, function (data) {
        // fill content and show modal
        $('#modalGeneric').html(data);
        $('#modalGeneric').modal('show');

    });
}

HTML

onclick="showGenericModal(event);"

this

的解决方案

另一种解决方案是将 this 传递给事件处理程序，因为它处理点击包含所需数据的元素

JS

function showGenericModal(anchor) {
     var url = $(anchor).data('url');

    // trigger an HTTP GET
    $.get(url, function (data) {
        // fill content and show modal
        $('#modalGeneric').html(data);
        $('#modalGeneric').modal('show');

    });
}

HTML

onclick="showGenericModal(this);"

ASP 核心 - jquery 总是返回数据 - url 来自第一次点击的控件

ASP Core - jquery always returning data-url from first clicked control

jquery

asp.net-core

popup

partial-views