0

我正在尝试使用之前已经附加的 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);
}
4

3 回答 3

2

而不是这样做..

你可以写：`

$(".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();

});
于 2013-08-11T18:18:07.030 回答
2

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

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

上面的行缺少'after 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);
};

演示小提琴在这里。

编辑：

除了上面指出的语法更正之外，如果您想处理多行的添加和单击，您还有一些选择：

备选一：

为了使您的代码更改降至最低，您只能更改iconClicked()以通过以下方式获取 clicket 图像event.target：

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

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

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

我个人最喜欢的，ditchiconClicked()并仅用于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');
于 2013-08-11T18:23:31.480 回答
0

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

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

.click(iconClicked);

如果您有一个函数，则无需将其包装在匿名函数中。

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

iconClicked = function(){
    var test = $(this).attr("src");
    alert(test);
}
于 2013-08-11T18:20:03.357 回答