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

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

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

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

Answer 2

事件处理程序附加在DOM准备一次，如果您操作DOM，则需要

A）手动重新附加事件处理程序
B）依赖jQuery.prototype.live

它可能更适合使用B，因此我建议将您的点击代码更改为类似..

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

这将针对通过DOM操作添加的任何锚点。

参考：http://docs.jquery.com/Events/live

你和FYI应该使用var在当前范围内声明pos。

Answer 3

动态添加项目时，click处理程序不会在新项目上注册。相反，请使用.live()：

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

使用.append（html）创建的jQuery元素不可用

3 个答案: