将唯一的单击事件绑定到中继器中的每个项目(ajax/jquery)
将唯一的单击事件绑定到中继器中的每个项目(ajax/jquery)
提问于 2013-03-17 18:23:12
好的，我有这个中继器：
<asp:Repeater runat="server" ID="rep" >
<ItemTemplate>
<tr>
<td>
<div id="resultDiv">
click me
</div>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>我有一个jquery ajax调用：
$(document).ready(function () {
$("#resultDiv").click(function () {
$.ajax({
type: "POST",
url: "Page.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#resultDiv").text(msg.d);
}
});
});
});问题是，这只适用于中继器中的第一个div。如果我单击任何其他div，则不会触发单击事件。我知道这是因为它们都有相同的id，即"resultDiv“。
我现在正在寻找一种给他们提供唯一ID的方法，我可以这样做：(在中继器项目模板中)
<td>
<div id="resultDiv_<%#Eval("divId") %>">
click me
</div> 这为中继器内的所有div提供了一个惟一的ID，但是这种方式不会再触发ajax click事件，因为
$("#resultDiv").click(function () {resultDiv现在有点像resultDiv_1或resultDiv_2。
因此，我正在寻找一些东西来绑定一个点击事件到中继器内的每个div。我试着在ajax调用中这样做：
$("#<%#Eval("divId") %>").click(function () 但是这不起作用，给了我各种各样的错误。
我有没有办法做到这一点？请不要说我不想使用updatepanel。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-17 18:32:15
如果你需要一个实时事件处理程序，你应该使用on：
$("body").on('click', '#resultDiv', function(e) { });如果您想以相同的方式(通过使用resultDiv_1或resultDiv_2)处理所有#resultDiv，您可以使用：
$("body").on('click', 'div[id^=resultDiv]', function(e) { });您可以使用类而不是ID，因为它们不是唯一的，您可以很容易地使用addClass或removeClass！
在您的示例中，我将向每个div添加相同的类，并将一个参数传递给某个data-attr (如果您需要每次单击以调用不同的任务)：
<div id="resultDiv" class="result" data-some-var="some-param">
click me
</div> 然后在你的事件上：
$("body").on('click', '.result', function(e) {
var param = $(this).attr('data-some-var');
//send or do something different according to the param
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15459689
复制相关文章
相似问题
腾讯云开发者
