Как функция может найти родительский элемент якоря, который изначально вызывал функцию?

Question

Хорошо, только один вопрос заставляет мою голову кружиться.

У меня есть якорный тег, который вызывает функцию:

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

Я бы хотел, чтобы эта функция работала с несколькими формами на одной странице.Поэтому я подумал о том, чтобы вернуться в дерево к родительскому элементу формы, получить его идентификатор и использовать его (как-то), чтобы позволить функции работать с несколькими формами на странице.

Вы можете видеть, что я пытался использоватьбыстрый console.log для проверки моей идеи, но он продолжал возвращаться "Undefined".Я также попытался запустить console.log в самом теге привязки, но он также был «Не определен».

Я протестировал .parents (), и он отлично работает в теге привязки, но не в функции iteslf.

Есть предложения?

Answer 1

Вы должны передать $ (this) на добавление родителей, и тогда у вас будет достаточно возможностей для работы в вашей функции. Итак:

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

и затем в функции используйте:

function addPerson(anchorElement) {
    var form = anchorElement.parents("form");
    //etc.
}  

Answer 2

Контекст this отличается. Измените клик на это:

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>

Answer 3

Не используйте атрибут 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"));
    ....
});

Answer 4

Передать идентификатор в качестве параметра. Например,

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

then...

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

Answer 5

Используйте родителей () с селектором (это будет искать вверх по всем родителям до совпадения, которое я нашел). например,

$(this).parents('form').[...]