Kjøre ajax når en knapp trykkes?

[clinton4]

Hei,

I dag bruker jeg

$('#formNavn').submit(function() {
    $.ajax({
        data: $(this).serialize(),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function(response) {
            $('#svar').html(response);
        }
    });
    return false; // cancel original event to prevent form submitting
});

for å poste og vise et resultat via ajax. Denne kjøres når submit knappen trykkes på. Jeg ønsker nå å legge til enda en knapp i skjemaet og ønsker bare at ajax kjøres dersom denne kanppen trykkes på. Knappen har id "hent".

Jeg regner med det er submit(function() som må endres til noe annet, noen som kan fortelle meg til hva?

 

[adeneo]

$('#hent').click(function() { ... });

 

[ChristianW]

Litt pirking kanskje.. Men bruk av ".click" og de andre "snarveiene" er vel ikke den riktige måten lenger.

$("#hent").on("click", function() { ... });

 

[adeneo]

jQuery gjør internt noe slikt :

jQuery.fn['click'] = function(fn){
        return fn ? this.on('click', fn) : this.trigger('click');
};

click() er med andre ord en forkortelse for to forskjellige metoder, alt ettersom om det brukes parametere eller ikke, og det er forøvrig en forkortelse det ikke er noen planer om å fjerne, slik at det blir akkurat det samme som å bruke on(), noe manualen også fremhever.

Den ene eller andre metoden har ingen fordeler når det brukes slik som her, men dersom man jobber en del med delegerte "event handlers" så kan det være greit å bruke on() hele veien for å være konsistent.

Jeg bruker normalt on() selv, men det er ingen ting i veien for å bruke click(), og ingen av disse er foretrukket over den andre, utover at jeg personlig mener on() ser bedre ut.

Til spørmålet, dersom knappen ligger inne i <form> elementet kan man gjøre:

$('#hent').on('click', function() { //on faktisk
    $.ajax({
        data: $(this.form).serialize(),  // this.form vil alltid referere til "parent form" elementet
        type: $(this.form).attr('method'),
        url:  $(this.form).attr('action')
    }).done(function(response) {
        $('#svar').html(response);
    });
});