Wie kann eine Funktion ein Elternelement des Ankers finden, der ursprünglich die Funktion aufgerufen hat?

Ok, die Frage allein macht meinen Kopf zum Drehen.Wie kann eine Funktion ein Elternelement des Ankers finden, der ursprünglich die Funktion aufgerufen hat?

Ich habe ein Anker-Tag, das eine Funktion aufruft:

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

Gerade als Referenz, ist dies die Funktion, die aufgerufen wird ist:

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

Ich möchte diese Funktion ermöglichen, Arbeiten Sie an mehreren Formularen auf einer einzelnen Seite. Mein Gedanke war also, zurück in den Baum zu dem übergeordneten Formularelement zu reisen, seine ID zu erhalten und diese (irgendwie) zu verwenden, damit die Funktion auf mehreren Formularen auf der Seite arbeiten kann.

Sie können sehen, ich versuchte mit einem schnellen console.log meine Idee zu testen, aber es kam immer wieder "Undefined". Ich habe auch versucht, die console.log im Anker-Tag selbst auszuführen, aber es war auch "Undefined".

Ich getestet .parents() und es funktioniert perfekt im Anker-Tag, aber nicht in der Funktion iteslf.

Irgendwelche Vorschläge?

Quelle

2010-11-22 Fireflight

Sie sollten $ (this) in hinzufügen Eltern übergeben und dann werden Sie den richtigen Umfang haben mit in Ihrer Funktion zu arbeiten. Also:

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

und dann in der Funktion Gebrauch:

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

Quelle

2010-11-22 22:15:11 mmurch

Warum übergeben Sie '$ (this)' als Argument, wenn Sie den Kontext direkt mit '.call (this)' verbinden können? –

So oder so, und Ihr Weg ist wahrscheinlich eleganter. Aber irgendwann müssen Sie "this" als ein jquery-Objekt mit $() umschließen, um eltern() usw. zu verwenden. Idealerweise würden wir das Ereignis in der js binden und nicht einmal den onclick im html verwenden. – mmurch

Verwenden Sie nicht das onclick-Attribut Verwenden Sie die jQuery-Ereignisbindung. Wie Sie keine Informationen über die Markup vorsah müssen Sie in den Wähler selbst

//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")); 
    .... 
});

Quelle

2010-11-22 22:13:46 jitter

Verwenden Eltern() mit einem Wähler füllen (das nach oben durch alle Eltern, bis das Spiel suchen i gefunden). z.B.

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

Quelle

2010-11-22 22:14:06

Der this Kontext ist anders. Ändern Sie den Onclick dazu:

addPerson.call(this);

Das wird die this in der Funktion Spiel bilden mit dem this im Anker-Tag.

Oder noch besser, nicht über ein Onclick-Attribut überhaupt, aber einen jQuery Event-Handler Anhang verwenden, wie folgt aus:

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

Und Ihr Anker-Tag würde keine Click-Handler auf sie:

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

Quelle

2010-11-22 22:14:39

Does ev.preventDefault() fungieren als return false? – Fireflight

@FireFlight, für Ihre Zwecke, ja. Aber technisch gesehen ist die Antwort nur eine Art von. 'ev.preventDefault()' stoppt die Standardaktion - für einen Link wird somit der Browser daran gehindert, zur nächsten Seite zu gehen (was für Ihren Fall gut ist). Bei einer Absenden-Schaltfläche wird der Browser daran gehindert, das Formular zu senden.Was auch immer die normale Browseraktion ist, 'preventDefault' stoppt sie. –

Aber Aktionen sprudeln auch und beeinflussen alle enthaltenden Elemente. Also, wenn Sie auf einen Link klicken, das enthaltende div und seinen Container, den ganzen Weg bis zu den Body- und HTML-Tags - sie alle erhalten auch ein "Klick" -Ereignis. Die meisten dieser Klickereignisse bedeuten nichts (denken Sie daran, zufällig auf einen Textteil einer Webseite zu klicken - es tut nichts). Technisch gesehen erhält es immer noch die Veranstaltung. 'ev.stopPropagation()' stoppt das Bubbling des Events bis zum Inhalt der Elemente. Wie auch immer, 'return false' ist eine Abkürzung für' ev.preventDefault() 'und' ev.stopPropagation() '. –

Übergeben Sie die ID als Parameter.

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

then... 

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

Quelle

2010-11-22 22:15:10

Wie kann eine Funktion ein Elternelement des Ankers finden, der ursprünglich die Funktion aufgerufen hat?

Antwort

Verwandte Themen