如何使用事件委托？

Question

I have 2 <span> s loaded from 2 different ajax scripts upon selection from a dropdown box. so my code is something like this

<span id='room_rate'>1, 000</span> // loaded by an ajax script
<span id='total_misc'>500</span> // loaded by another ajax script

<input type='text' id='total'/>

<button type='button' id='compute_total'>Compute</button>

Question:

How to use event delegation to get the values from the 2 <span> and display it in the input text total after clicking the compute button ?

---

What I've tried:

$(document).ready(function () {
    $(this).on('click', 'span', function () {
        var room_rate = $('#room_rate').val();
        var total_misc = $('#total_misc').val();

        alert(room_rate + total_misc);
    });
});

What I get:

I don't get the alert and also I dont get an error in the console(F12)

Thank you for your help in advance.

Answer 1

Read the fine manual...

.val()

The .val() method is primarily used to get the values of form elements such as input , select and textarea .

You probably want .text()

I'd also add the delegation to your button, not the spans, ie

$(document).on('click', '#compute_total', function(e) {
    e.preventDefault();

    $('#total').val($('#room_rate').text() + $('#total_misc').text());
});