Question

好的，所以我有这个转发器：

        <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，则不会触发click事件。我知道这是因为他们都有相同的id，是“resultDiv”。

我现在正在寻找一种给他们唯一ID的方法，我可以这样做:(在转发器itemtemplate内）

 <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 ()

但这不起作用并且给我带来各种错误。

有什么方法可以做到这一点吗？请注意，我不想使用updatepanels。

Answer 1

如果您需要实时事件处理程序，则应使用on：

$("body").on('click', '#resultDiv', function(e) { });

如果您想以相同的方式处理所有#resultDiv（使用resultDiv_1或resultDiv_2），您可以使用：

$("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
});

将唯一的click事件绑定到repeater中的每个项目（ajax / jquery）

1 个答案: