加载局部视图时从 Jquery 复制事件

Question

我有 table 每行一个按钮，每个按钮可以获得相同模型的不同对象的相同部分视图，我将 html 插入 Div，部分视图有单击事件 Jquery。

像这样

<div id="MyDiv">
</div>
<script>
funtion InserthtmlToDiv(){
//data (partialView html) from ajax
$('#MyDiv').html(data);
}
</script>

PartialViewCode

<div>
My html
<button  type="button" id="MyButton">ShowAlert</button>
</div>
<script>
$('#MyButton').on("click", function (e) {
    alert('@Model.ID');
});
</script>

每次我获得部分视图时，点击 MyButton 的事件就像 "saved" 甚至替换了 MyDiv 的 html，所以当我点击按钮时，我可以每个加载的部分视图获得 N 个警报。

如果用函数替换事件我可以解决，但是如何防止保存事件并只执行插入的 div 中的事件。

备注：我有多个事件与此相同的问题，这是一个例子。我只有一个带有 Id="MyButton" 的按钮。 div "MyDiv"不在局部视图中，每次加载局部视图时，"MyDiv"的事件监听器添加点击事件。

Answer 1

如果你的点击事件在局部视图内，每次都会绑定点击事件。因此，在您的情况下，只需在呈现 table 的主页面中添加您的点击事件。

您可以为每一行按钮提供相同的 class，并为所有按钮创建一个通用的点击事件。
为每个按钮赋予具有唯一值的 attr 值，以便在点击事件中您可以识别加载局部视图的位置。
只需按照以下步骤操作即可。

     <script>
        $('.myButton').on('click',function(){
         var clickedButton = $(this).attr('data-id');
         // Add your code 

    });
     </script>

加载局部视图时从 Jquery 复制事件

Duplicate Events from Jquery when loading partials views

asp.net-mvc

jquery

events

asp.net-mvc-partialview