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"また、あなたの列での使用にも注意してください。#addAdmin2 回以上クリックされる可能性があるため、同じ ID を持つ複数の要素が表示される可能性があり、ジャンクが FREAK OUT になります!

于 2012-07-03T17:15:52.060 に答える
1

For dynamically created elements, you need the live function:

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

Works with, click, hover and all types of functions.

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

于 2012-07-03T17:12:29.347 に答える
1

You've got a typo in the .append (forgot to add forward slash), fix the broken HTML and it should work:

From:

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

To:

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

$(document)dom を追加するときにセレクターを使用します。お勧めliveしdelegateません。例えば ​​：

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