Question

脚本：

$(document).ready(function(){
    $.ajax({   
        type    : "POST",
        url     : "list_controller.php",
        data    : "a=get&list_id=my_list",
        success : function(data){
            $('#list_container').innerHTML = data;
        }
    });                     
});

HTML ：

<div id="list_container"></div>

从服务器返回的data包含带有一些可点击链接的HTML，这些链接应该触发另一个jQuery函数并再次重新加载#list_container DIV：

<a href="#" value="a=edit&list_id=my_list&user=artur&id=110" id="adminlink">
    <img src="images/edit_user.png" />
</a>

我希望这些链接调用其他AJAX函数，f.ex：

$(document).ready(function(){
    $('#adminlink').click(function () {
        var val = $(this).attr("value");
        $.ajax({       
            type    : "POST",
            url     : "list_controller.php",
            data    : val,
            success : function(data){
                $('#list_container').innerHTML = data;
            }
        });
    });
    return false;
 });

问题是我无法访问触发点击功能的#adminlink锚元素。

其他所有内容都完美无缺，但 innerHTML 动态data的任何元素都无法再访问了。

Answer 1

因为您正在覆盖#list_container的内容，所以您注册处理程序的#adminlink不再是页面上的那个。

最简单的解决方案是事件委派，它依赖于事件冒泡：

$('#list_container').on('click', '#adminlink', function() { 
    ...
});

即。它实际上是接收#list_container事件的静态click元素，但jQuery然后检查它是否是在调用所需处理程序之前实际被点击的ID为adminlink的元素。

在使用事件委托时，始终尝试使用“最接近”的静态祖先元素。在这种情况下，这似乎是#list_container。在最糟糕的情况下，您最终会使用document，但事件必须通过DOM冒充所有，然后才能进行处理。

Jquery，将innerHTML添加到DIV并通过innerHTML的ID访问元素？

1 个答案: