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

这是因为第二个参数是选择器（字符串），而不是选择的元素$()。 $('vote'+rowCount)不正确，并且.on()click 事件将在您单击的任何位置触发，因为该.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 回答