1

シンプルなjqueryコードがあります

$('tbody').on("click",$('vote'+rowCount),function(){alert('hi');});

しかし、セレクターをクリックすると表示されるのではなく、テーブル本体のどこかをクリックするとアラートが表示されるのはなぜですか?

- - 編集 - -

要素を $('vote'+rowCount) ではなく "#vote"+rowCount と書くことで機能しましたが、別の奇妙な問題があります - このコードで動的行を作成していますが、テキストボックスは（初期化されたように）空のままです。なぜそうなのですか

$('#add_ans').click(function(){
    var rowCount = $('table tbody tr').length + 1;
    var rowString = '<tr>\
                        <td><div class="span_5"><span class="badge badge-success">'+rowCount+'</span></div></td>\
                        <td><div class="span3"><input type="text" class="input-large" value="" /></div></td>\
                        <td><div class="span2 pull-right"><b>0</b></div></td>\
                        <td><div class="span2"><button class="btn btn-success" id="vote'+rowCount+'"><b>Vote!</b> <i class="icon-thumbs-up"></i></button></div></td>\
                        <td><div class="span2"><button class="btn btn-info" disabled><b>Reviews</b> <i class="icon-ok-circle"></i></button></div></td>\
                    </tr>'
    $('tbody').append(rowString);
    $('tbody').on("click","#vote"+rowCount,voteOption);
});

イベントハンドラは

function voteOption(){            
        var rowCount = $('tr').index($(this).closest('tr'));
        alert(rowCount);
        var ans = $('tr:eq('+rowCount+') .input-large').attr('value');
        alert(ans);
}
4

1 に答える 1

3

これは、2 番目の引数が によって選択された要素ではなく、セレクター (文字列) であるため$()です。 $('vote'+rowCount)は正しくありません。イベントは実際には にバインドされている.on()ため、クリックした場所でクリック イベントが発生します。.on<tbody>

たとえば、これは の<div>内部に一致し<tbody>、クリック イベントをそれにバインドします。

$('tbody').on("click", 'div' ,function(){alert('hi');});

これがコード例です....

HTML

<input type="button" id="createBtn" value="Create"/>
<table id="mytable">
    <tbody id="mytableBody">

    </tbody>
</table>

JavaScript

$(document).ready(function()
{
    var i = 0;
    $("#createBtn").click(function()
    {
        var newRow = $("<tr></tr>").attr("id", "row"+i);
        var btn = $("<button>Vote</button>").attr("id", "vote"+i);
        var col = $("<td><span>Video "+i+"</span></td>");
        col.append(btn);
        newRow.append(col);
        $("#mytable tbody").append(newRow);
        i++;
    });
    $('#mytable tbody').on("click", "button", function(){
        alert(this.id);
        if(this.id == 'vote0')
        {
            alert("Thanks for voting for video 0.");
        }
        else if(this.id == 'vote1')
        {
            alert("Thanks for voting for video 1.");
        }
        else
        {
            // handle the rest....
        }
    });
});

これはjsfiddle http://jsfiddle.net/33Wny/1/でも見つけることができます

于 2013-02-27T19:19:54.093 に答える