javascript - 如何将 JavaScript 的范围设置为部分视图？

Question

我有一个 ASP.NET 部分视图

<div class="wrapper">
    <div class="remove-item"></div>        
    <input name="Account" class="currency" />
     ...some more html input elements removed for brevity
</div>

局部视图有自己的 JavaScript

<script type="text/javascript">
    $(function(){
       $(".remove-item").click(function(){
          var i =  $("input.currency");
          // do something
       })   


    })
</script> 

在一个页面上，这个局部视图会出现多次。每个input元素都有唯一的名称。然而 JavaScript 是使用类名来选择元素。

问题是当局部视图的第二个实例呈现时，$(".remove-item")也会从第一个局部视图中选择元素。因为它扫描整个 DOM。

在这里确定 JavaScript 范围的最佳方法是什么，以便它只选择具有自己范围的元素？

---

只选择元素

标签： javascriptjqueryasp.net-mvcasp.net-corepartial-views

Answer 1

在处理未知数量的重复元素时，您可以使用事件委托。与其多次输出 JS 并在每个部分上都有一个事件侦听器，不如将其输出一次并且整个部分集只有一个事件。无论页面上最终有多少元素，即使动态显示更多元素，您的事件仍然会触发：

1. 仅输出此 JavaScript 一次：

<script type="text/javascript">
    $(".containing-parent").on('click', '.remove-item', function() {
        var i = $(this).closest('.wrapper').find('input.currency');
    });
</script>

2. 用可以附加一个事件的 div 包装您的部分：

<div class="containing-parent">
    ...partials go here
</div>

您需要确保您的 javascriptdiv.containing-parent在执行时可以找到。

例子：

$(".containing-parent").on('click', '.remove-item', function() {
  var i = $(this).closest('.wrapper').find('input.currency').val();
  console.log(i);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containing-parent">
  <div class="wrapper">
    <div class="remove-item">X</div>
    <input name="Account1" class="currency" value="1" />
  </div>
  <div class="wrapper">
    <div class="remove-item">X</div>
    <input name="Account2" class="currency" value="2" />
  </div>
  <div class="wrapper">
    <div class="remove-item">X</div>
    <input name="Account3" class="currency" value="3" />
  </div>
</div>