Question

我有一张桌子：

           <table id="tblViewNotes" runat="server" border="1" style="border-collapse:collapse;width: 650px;margin-left: 7px;">
                                        <thead>
                                            <tr>
                                                <th>Title</th>
                                                <th>Description</th>
                                                <th>Edit</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>

我有两个文本框标题和说明。我也有一个保存按钮，点击保存按钮，我将数据附加到我的桌子上。

$('#<%=ibtnSaveTask.ClientID %>').click(function () {

    var title = $('#<%=txtTitle.ClientID %>').val();
    var description = $('#<%=txtContent.ClientID %>').val();

    $('#<%=tblViewNotes.ClientID %> tbody').append('<tr><td>' + title + '</td><td>' + description + '</td><td> <img id="imgEdit" src="../../Images/Edit.gif" style="width:20px; height:20px;" title="Edit" runat="server" /> </td><td>' + description + '</td></tr>');

});

所以它按预期工作。但现在我无法获得＆＃34; imgEdit＆＃34;按钮。所以关注不起作用。

$('#<%=imgEdit.ClientID%>').click(function () { alert("Edit Clicked") });

Answer 1

对于jQuery 1.7+，您可以使用.on()

将事件处理程序附加到父元素

请参阅http://api.jquery.com/on/

所以不是......

$("#imgEdit").click( function() {
    // do something
});

你可以写......

$('body').on('click', '#imgEdit', function() {
    // do something
});

另外使用相同的ID添加元素不是一个好主意，而是使用计数器在每个编辑按钮上制作不同的ID并使用点击事件{ {1}}代替class添加ID编辑按钮并使用class绑定class事件

Answer 2

最好在附加编辑按钮的同时附加事件处理程序。

function editNote(){
   alert("Edit Clicked")
}

$('#<%=ibtnSaveTask.ClientID %>').click(function () {

var title = $('#<%=txtTitle.ClientID %>').val();
var description = $('#<%=txtContent.ClientID %>').val();

$('#<%=tblViewNotes.ClientID %> tbody').append('<tr><td>' + title + '</td><td>' + description + '</td><td><a id="btnEdit" href="#" onclick="editNote();"> <img  src="../../Images/Edit.gif" style="width:20px; height:20px;" title="Edit" /> </a> </td><td>' + description + '</td></tr>');

});

如何在jQuery中找到Edit按钮的ID

2 个答案: