编辑：

Question

我正在尝试使用之前已经附加的jQuery访问元素。我知道使用“普通”命令无法看到动态添加的元素 - 我已经看到了许多涉及.link（）和.on（）的其他问题 - 但我不确定如何应用这些答案这个案例。抱歉可能重复，但我是jQuery的新手。

这是一个基本的例子 - 我在表格中添加一行和一个单元格（这通常是在循环中） - 并在单元格中放置一个图像。然后在稍后，我想访问此图像的src并更改它：

addTableRows = function(){
    $("#tableBody")
        .append($("<tr class='tableRow>")
            .append($("<td valign='top' align='center'>")                               
                .append($("<img src='expand-icon.gif'>")
                    .attr('id','expand-icon')
                    .click(function(){
                         iconClicked();
                    }))));

iconClicked = function(){
    var test = $("#expand-icon").attr("src");
    alert(test);
}

目前，test以“未定义”的形式返回。如何访问expand-icon图片？

修改

（添加更多细节以包含表格单元格的循环和唯一ID）

addTableRows = function(response){
    var members = response['member'];
    $.each(members, function (idx, data) {
        var currentID = data['identifier'];
        $("#tableBody")
            .append($("<tr class='tableRow'>")
                .append($("<td valign='top' align='center'>")                               
                    .append($("<img src='expand-icon.gif'>")
                        .attr('id','expand-icon' + currentID)
                        .click(function(){
                             iconClicked(currentID);
                        })
                    )
                )
        );
    });
}

iconClicked = function(currentID){
    var test = $("#expand-icon" + currentID).attr("src");
    alert(test);
}

Answer 1

而不是这样做..

你可以写：`

$(".tableRowExpand").click(function(){

var test = $(this).find('#expand-icon').attr("src");
alert(test);

});

将tableRowExpand添加到ing类属性中但请注意，文档中有多个展开图标ID。 ids应该是唯一的..改为使用类。

好的，这就完成了：

function addTableRows()
{   
    $("#tableBody").append("<tr class='tableRow'><td valign='top' align='center'><img src='expand-icon.gif' class='tableRowExpand'></td></tr>");
}

$(".tableRowExpand").click(function(){

var test = $(this).attr("src");
alert(test);
var tablerow = $(this).parent().parent();
var tablecell = $(this).parent();

});

Answer 2

您的代码没问题。你所拥有的是语法错误：

.append($("<tr class='tableRow>")

上面的行在'之后缺少tableRow。您在};行之前的addTableRows = function() {也没有结束iconClicked = function...。

下一次，像TidyUp和JSHint这样的工具（参见JSFiddle的按钮）可能有助于使您的代码更清晰，从而更容易发现这些错误。

这是一个固定版本：

addTableRows = function () {
    $("#tableBody").append(
           $("<tr class='tableRow'>").append( // added ' here
               $("<td valign='top' align='center'>").append(
                    $("<img src='expand-icon.gif'>").attr('id', 'expand-icon').click(function () { iconClicked(); })
               )
           )
    );
}; // added this here

iconClicked = function () {
    var test = $("#expand-icon").attr("src");
    alert(test);
};

Demo fiddle here

编辑：

除了上面提到的语法更正之外，如果您想要处理多个行的添加和单击，您还有其他选择：

的 Demo fiddle for alternative one.

的 Demo fiddle for alternative two.

替代方案：

要将代码更改保持在最低限度，您只能更改iconClicked()以通过event.target获取Clicket图像：

iconClicked = function(){ var test = $(event.target).attr("src"); alert(test); }

这将处理最终的多个ID，但是，您应该避免使用它们。

备选方案二（最佳选择）：

我个人最喜欢的，沟通iconClicked()，只需使用on()来处理点击事件：

addTableRows = function(imageId, imageSrc){ $("#tableBody").append( $("<tr>").addClass('tableRow').append( $("<td>").attr('valign','top').attr('align','center').append( $("<img>").attr('id', imageId).attr('src',imageSrc) ) ) ); }; $('#tableBody').on('click', '.tableRow img', function(){ var test = $(this).attr("src"); alert(test); }); addTableRows('expand-icon1', 'http://his-booking.com/images/flag_br.gif'); addTableRows('expand-icon2', 'http://bc.id.au/images/fr_flag.gif');

Answer 3

首先，id属性在页面中必须是唯一的。请尝试将其更改为课程。

其次，您可以将处理程序更改为：

.click(iconClicked);

如果你有一个函数，你不需要将它包装在一个匿名函数中。

第三，您可以在事件处理程序中使用this来引用被单击的元素：

iconClicked = function(){
    var test = $(this).attr("src");
    alert(test);
}

使用jQuery访问以前附加的元素

3 个答案:

编辑：

替代方案：

备选方案二（最佳选择）：