我有一个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的作用域只选择自己作用域内的元素？
只选择元素
当处理未知数量的重复元素时，你可以使用 活动代表团. 与其多次输出JS，并在每个局部上都有一个事件监听器，不如输出一次，并为整个局部设置只设置一个事件。无论页面上最终有多少元素，即使有更多的元素动态出现，你的事件仍然会被触发。
<script type="text/javascript">
$(".containing-parent").on('click', '.remove-item', function() {
var i = $(this).closest('.wrapper').find('input.currency');
});
</script>
<div class="containing-parent">
...partials go here
</div>
你需要确保你的javascript能够找到 div.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>最好的方法是创建一个模块。
// Module
function PartialView(root) {
var button = root.querySelector('button');
button.addEventListener('click', remove);
function remove() {
button.removeEventListener('click', remove);
root.remove();
}
}
// Attaching listeners
Array.from(document.querySelectorAll('.partial-view'))
.forEach(PartialView);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="partial-view">
<button>remove</button>
<input type="text" />
</div>
<div class="partial-view">
<button>remove</button>
<input type="text" />
</div>
<div class="partial-view">
<button>remove</button>
<input type="text" />
</div>
<div class="partial-view">
<button>remove</button>
<input type="text" />
</div>
<div class="partial-view">
<button>remove</button>
<input type="text" />
</div>
</body>
</html>你可以给包含局部视图的div一个Unique ID。
<div class="wrapper" id="partialViewHandler">
然后在你的Javascript中首先找到ContainerDiv并将其值存储在一个参数中，并在你的JQuery选择器中使用它。
<script type="text/javascript">
var x = $("#partialViewHandler");
$(function () {
$(".remove-item", x).click(function () {
var i = $("input.currency", x);
// do something
})
})
</script>