使用 .append(html) 创建的 jQuery 元素不可用

Question

我有以下内容

<script>
    $(document).ready(function() {
        $(".mapLink").click(function(){
            pos = $(this).attr("id");
            alert(pos);
        });
    });
</script>

<a class="map" id="test">Test</a>

当我点击“测试”时，我收到一条警报……太棒了。但我还有以下...

<script>
    $(document).ready(function() {
        $(".mapLink").click(function(){
            pos = $(this).attr("id");
            alert(pos);
        });
    });
    $(#emp").change(function(){
        $("#existingAttendTime").html('');
        $.ajax({
            url: "existingAttendTime.php?emp=" + SelValue + "&time=0",
            cache: false,
            success: function(html){
                $("#existingAttendTime").append(html);
            }
        });
    });
</script>

<a class="mapLink" id="test">Test</a>
<div id="existingAttendTime"></div>

当 emp 发生变化时，它会触发并从existingAttendTime.php 获取结果并将其插入到 div 中，所以现在看起来像......

<a class="mapLink" id="test">Test</a>
<div id="existingAttendTime"><a class="mapLink" id="12345">Return Test</a></div>

单击“测试”会显示警报“测试”，但单击“返回测试”不会显示任何信息。

我做错了什么或者我错过了什么？

Answer 1

您需要在“实时”模式下绑定(bind)您的点击处理程序，否则新添加的 DOM 节点将不会触发它:

$(document).ready(function() {
    $(".mapLink").live("click", function(){
        pos = $(this).attr("id");
        alert(pos);
    });
});

曾经有一个实时查询所需的插件，但 jQuery 1.3 集成了它的有限版本 into core 。另请注意，只有某些事件类型有效； change、submit 等不会，因此您必须在将新节点附加到 DOM 的同一函数内显式附加处理程序。