Javascript 函数如何找到最初调用函数的锚点的父元素？

好吧，这个问题让我头晕目眩

我有一个正在调用函数的锚标记：

<a href="#" id="addPerson" onClick="addPerson(); return false;">Add a Guest</a>

仅供参考，这是正在调用的函数：

function addPerson() {
//current keeps track of how many rows we have.
current++;
console.log($(this).parent('form').attr('id'));
var strToAdd = '<div class="row">\
          <div class="column grid_2">\
            <label for="two-guests-name'+current+'">Guest '+current+':</label>\
          </div>\
          <div class="column grid_5">\
            <input name="two-guests-name'+current+'" type="text" id="two-guests-name'+current+'" value="Name" onfocus="RemoveFormatString(this, \'Name\')" /> \
            <input name="two-guests-age'+current+'" type="text" class="guestage digits" id="two-guests-age'+current+'" value="Age" size="4" maxlength="3" onfocus="RemoveFormatString(this, \'Age\')" />\
          </div>\
        </div>'

$('#numberguests').append(strToAdd)
};

函数addPerson（）{
//current跟踪我们有多少行。
电流++；
console.log（$（this.parent（'form'）.attr（'id'））；
var strToAdd=\
\
来宾“+当前+”：\
\
\
\
\
\
'
$（'#numberguests'）.append（strToAdd）
};

我想允许这个函数在一个页面上处理多个表单。因此，我的想法是在树中返回父表单元素，获取其id，并使用该id（以某种方式）允许函数在页面中的多个表单上工作

您可以看到，我尝试使用quick console.log来测试我的想法，但它总是返回“未定义”。我还尝试在锚标记本身中运行console.log，但它也是“未定义的”

我测试了.parents（），它在锚定标记中工作得很好，但在函数iteslf中没有

---

有什么建议吗？

不要使用

onclick

属性使用jQuery事件绑定。由于您没有提供有关标记的任何信息，因此需要自己填写选择器

//this binds the same function to all a tags specified by the selector
$("form somemoreselectorgotgettheright a").bind("click", function() {
    console.log($(this).parent("form").attr("id"));
    ....
});

---

不要使用

onclick

属性使用jQuery事件绑定。由于您没有提供有关标记的任何信息，因此需要自己填写选择器

//this binds the same function to all a tags specified by the selector
$("form somemoreselectorgotgettheright a").bind("click", function() {
    console.log($(this).parent("form").attr("id"));
    ....
});

将parents（）与选择器一起使用（这将向上搜索所有父项，直到找到匹配项为止）。e、 g

将parents（）与选择器一起使用（这将向上搜索所有父项，直到找到匹配项为止）。e、 g

---

此

上下文不同。将onclick更改为：

addPerson.call(this);

这将使函数中的

this

与锚定标记中的

this

匹配

或者更好的是，根本不使用onclick属性，而是使用jQuery事件处理程序附件，如下所示：

$(document).ready(function() {
    $('#addPerson').click(function(ev) {
        ev.preventDefault();
        // Do something with $(this), which is the anchor tag
    });
});

并且您的定位标记上不会有任何单击处理程序：

<a href="#" id="addPerson">Add a Guest</a>

---

此

上下文不同。将onclick更改为：

addPerson.call(this);

这将使函数中的
this
与锚定标记中的
this
匹配

或者更好的是，根本不使用onclick属性，而是使用jQuery事件处理程序附件，如下所示：

$(document).ready(function() {
    $('#addPerson').click(function(ev) {
        ev.preventDefault();
        // Do something with $(this), which is the anchor tag
    });
});

并且您的定位标记上不会有任何单击处理程序：

<a href="#" id="addPerson">Add a Guest</a>

将id作为参数传入。乙二醇

<a href="#" id="addPerson" onClick="addPerson('addPerson'); return false;">Add a Guest</a>

then...

function addPerson(parent_id) {
// do something with parent_id


然后。。。
函数addPerson（父\u id）{
//用家长id做些什么
将id作为参数传入。例如

<a href="#" id="addPerson" onClick="addPerson('addPerson'); return false;">Add a Guest</a>

then...

function addPerson(parent_id) {
// do something with parent_id


然后。。。
函数addPerson（父\u id）{
//用家长id做些什么
您应该将$（this）传递到addparents中，这样您就可以在函数中使用适当的作用域。因此：

<a href="#" id="addPerson" onClick="addPerson($(this)); return false;">Add a Guest</a>

您应该将$（this）传递到addparents中，然后您就可以在函数中使用适当的作用域。因此：

<a href="#" id="addPerson" onClick="addPerson($(this)); return false;">Add a Guest</a>

ev.preventDefault（）是否作为返回值为false？@Fireflight，出于您的目的，是的。但从技术上讲，答案只是某种程度上。
ev.preventDefault（）
停止默认操作——因此对于链接，它将阻止浏览器进入下一页（这对您的情况有好处）。对于“提交”按钮，它将阻止浏览器提交表单。无论正常的浏览器操作是什么，
preventDefault
都会阻止它。但操作也会冒泡并影响所有包含的元素。因此，如果您单击链接、包含的div及其容器，一直到body和html标记，它们都会收到“单击”事件。大多数这些点击事件都没有任何意义（想象一下随机点击网页的文本部分——它什么也不做）。但从技术上讲，它仍然在接收事件。
ev.stopPropagation（）
阻止事件冒泡到包含元素。无论如何，
return false
是同时执行
ev.preventDefault（）
和
ev.stopPropagation（）
的缩写。我更喜欢显式执行
ev.preventDefault（）
而不是
return false
，原因有三：（1）很清楚它在做什么。名称本身“preventDefault”就说明了这一点。（2）您可以将它放在函数调用的任何位置，然后继续执行函数的其余部分（请注意，我在我的示例中放在第一行）——这给了您更多的结构自由。（3）返回指令具有将值返回给函数调用方的特定语义含义。在事件处理程序中返回“false”不尊重该语义含义——这几乎是对“return”意图的滥用。ev.preventDefault（）是否是否作为返回错误？@Fireflight，出于您的目的，是的。但从技术上讲，答案只是某种程度上。
ev.preventDefault（）
停止默认操作——因此对于链接，它将阻止浏览器进入下一页（这对您的情况有好处）。对于“提交”按钮，它将阻止浏览器提交表单。无论正常的浏览器操作是什么，
preventDefault
都会阻止它。但操作也会冒泡并影响所有包含的元素。因此，如果您单击链接、包含的div及其容器，一直到body和html标记，它们都会收到“单击”事件。大多数这些点击事件都没有任何意义（想象一下随机点击网页的文本部分——它什么也不做）。但从技术上讲，它仍然在接收事件。
ev.stopPropagation（）
阻止事件冒泡到包含元素。无论如何，
return false
是同时执行
ev.preventDefault（）
和
ev.stopPropagation（）
的缩写。我更喜欢显式执行
ev.preventDefault（）
而不是
return false
，原因有三：（1）很清楚它在做什么。名称本身“preventDefault”就说明了这一点。（2）您可以将它放在函数调用中的任何位置，然后继续执行t