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

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

---

而不是这样做

你可以写：`

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

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

});

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

好了，这是完整的：

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();

});

函数addTableRows（）
{   
$（“#表体”）。追加（“”）；
}
$（“.tableRowExpand”）。单击（函数（）{
var test=$（this.attr（“src”）；
警报（测试）；
var tablerow=$（this.parent（）.parent（）；
var tablecell=$（this.parent（）；
});

而不是这样做

你可以写：`

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

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

});

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

好了，这是完整的：

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();

});

函数addTableRows（）
{   
$（“#表体”）。追加（“”）；
}
$（“.tableRowExpand”）。单击（函数（）{
var test=$（this.attr（“src”）；
警报（测试）；
var tablerow=$（this.parent（）.parent（）；
var tablecell=$（this.parent（）；
});

首先，

id

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

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

.click(iconClicked);

如果您有一个函数，则不需要将其封装在匿名函数中

第三，您可以在事件处理程序中使用

this

，以引用已单击的元素：

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

---

首先，

id

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

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

.click(iconClicked);

如果您有一个函数，则不需要将其封装在匿名函数中

第三，您可以在事件处理程序中使用

this

，以引用已单击的元素：

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

---

你的代码没问题。您遇到的是语法错误：

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

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

备选方案一： 要将代码更改保持在最低限度，您只能更改

iconClicked（）

，以通过

事件获取clicket图像。目标

：

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

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

备选方案二（最佳方案）： 我个人的最爱，ditch

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');

addTableRows=函数（imageId，imageSrc）{
$（“#表体”）。追加(
$（“”）。addClass（'tableRow'）。追加(
$（“”）.attr（'valign'，'top'）.attr（'align'，'center'）.append(
$（“您的代码正常。您遇到的是语法错误：

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


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





备选方案一：
要将代码更改保持在最低限度，您只能更改
iconClicked（）
，以通过
事件获取clicket图像。目标
：

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

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

备选方案二（最佳方案）：
我个人的最爱，ditch
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');

addTableRows=函数（imageId，imageSrc）{
$（“#表体”）。追加(
$（“”）。addClass（'tableRow'）。追加(
$（“”）.attr（'valign'，'top'）.attr（'align'，'center'）.append(
$（“只需一个注释，您不需要多个
追加
。一个完整的行就足够了。您可以在click callback中使用
$（此）
，访问当前元素，在您的情况下是img。@SachinG:The“real”代码要长得多，我认为一个巨大的附加行会导致糟糕的编码。但是多个附加行会导致问题吗？@jcubic你能解释一下你将在哪里添加
$（这个）
？你的意思是类似
$（这个）。单击（函数）
…只需一个注释，您不需要多个
追加
。一个完整的行就足够了。您可以在单击回调中使用
$（此）
，访问当前元素，在您的情况下为img。@SachinG:The“real”代码要长得多，我认为一个巨大的附加行会导致糟糕的编码。但是多个附加行会导致问题吗？@jcubic你能解释一下你将在哪里添加
$（这个）
？你的意思是类似
$（这个）。单击（函数）
…应该提到的是，如果多次调用
addTableRows
，则
iconClicked
函数将不会像预期的那样运行，因为id不会是唯一的。@dc5是的，您是正确的。请确保我在编辑中解决了这一问题。@acdcjunior谢谢！对于最初的错误，我很快添加了它，以便了解整个过程ss.我会记住以后不要使用简化代码！我已经编辑了这个问题，以包括我正在使用的循环，以及表格单元格的唯一ID。这会影响你的答案吗？如果会，我很抱歉。我相信不会。原则仍然存在。一个使用更新代码的示例：（注意我更改了
iconClicked（）
稍微显示一下ID，这样您就可以看到它们的值根据单击的标志而变化）。效果如何？尽管尽可能使您的代码以最小的努力工作，但我更愿意。I