2

我已经使用 append 将 tr 和 td 标签添加到表中,但我的 jQuery 似乎不知道 dom 对象在那里(我认为这就是 append/prepend 所做的?)。当我运行脚本时,表格行被添加并且用户可以看到它,但是 jQuery 没有捕获超链接或其他任何内容上的点击处理程序。我在不同的页面上做了同样的事情,效果很好。我也包括在内。如果有人能告诉我我的思路在哪里出轨,我将非常感激。另外,如果我以错误的方式解决此问题,请告诉我,以便我改进。

损坏的代码:

    $("#addAdmin").click(function(){
                $("#chosenAdmins").append('<tr id = "admin' + $("#admins").val() + '"><td align="left">' + $("#admins option:selected").text() + ' </td><td align="right"><a href="#" class = "removeAdmin" id = "ra" style = "font-size: 10px;">Remove</a></td><tr>');
    });
    $(".removeAdmin").click(function(e){
        e.preventDefault();
        alert('clicked');
        alert(this.attr(id));
    });
    <select id = "admins">
        <option value = "1">bob smith</option>
    </select> 
    <input type = "button" id = "addAdmin"/>
    <table id = "chosenAdmins" align="center" width="0%"> </table>

在不同页面上工作的类似代码是:

    $(document).ready(function() {
        var leftData = '<div id = "l1">left Stuff</div>';
        var leftData = leftData + '<div id = "l2">left Stuff</div>';
        var rightData = '<div id = "r1">right Stuff</div>';
        var rightData = rightData + '<div id = "r2">right Stuff</div>';
        $("#selector").prepend("<div id = 'leftSelect' style = 'float:left'>"+leftData+"</div><div id = 'rightSelect' style = 'float:left'>"+rightData+"</div>");
        $("#l1").click(function(){
            $(this).hide("fast", function(){
                $(this).prependTo('#rightSelect');
                $(this).show("fast");
            });
        });
     });

<div id = "selector"> </div>
4

5 回答 5

3

$('.removeAdmin').click()在页面上有任何.removeAdmin元素之前,您正在定义您的事件处理程序 ( )。

您需要做的是委托您的活动。假设您使用的是最新的 jQuery:

$("#chosenAdmins").on('click','.removeAdmin',function(e){
    e.preventDefault();
    alert('clicked');
    alert(this.attr(id));
});

这样,事件处理程序被附加到一个存在的元素,即chosenAdmins表。

注意不建议使用.live,因为这会将事件附加到文档中,并且其他代码可能会无意中删除这些事件。如果您使用的是 jQuery < 1.7,请使用delegate

$("#chosenAdmins").delegate('.removeAdmin','click',function(e){
    e.preventDefault();
    alert('clicked');
    alert(this.attr(id));
});
于 2012-07-03T17:14:32.353 回答
2

.removeAdmin添加点击处理程序时还不存在。试试这个:

$("#addAdmin").click(function(){
        var tr = $("#chosenAdmins").append('<tr id = "admin' + $("#admins").val() + '"><td align="left">' + $("#admins option:selected").text() + ' </td><td align="right"><a href="#" class = "removeAdmin" id = "ra" style = "font-size: 10px;">Remove</a></td><tr>');
        $(".removeAdmin", tr).click(function(e){
            e.preventDefault();
            alert('clicked');
            alert(this.attr(id));
        });

    });
    <select id = "admins">
        <option value = "1">bob smith</option>
    </select> 
    <input type = "button" id = "addAdmin"/>
    <table id = "chosenAdmins" align="center" width="0%"> </table>

另外,小心id="ra"在你的行中使用。由于#addAdmin可能会被多次点击,因此您最终可能会得到多个具有相同 ID 的元素,这将使您的垃圾疯狂!

于 2012-07-03T17:15:52.060 回答
1

对于动态创建的元素,您需要以下live功能:

$("#elem").live("click", function() {
    // Code here
});

适用于、单击、悬停和所有类型的功能。

http://api.jquery.com/live/

于 2012-07-03T17:12:29.347 回答
1

您在.append(忘记添加正斜杠)中有错字,修复损坏的HTML,它应该可以工作:

从:

...Remove</a></td><tr>')

到:

...Remove</a></td></tr>')
于 2012-07-03T17:13:31.043 回答
0

$(document)附加 dom 时使用选择器livedelegate不推荐。例如 :

$(document).on('click','.removeAdmin',function(e){
    e.preventDefault();
     alert('clicked');
    alert(this.attr(id));
});
于 2015-05-27T11:39:45.330 回答