javascript - 如何使用事件委托(delegate)？

Question

我有 2 <span>从下拉框中选择时从 2 个不同的 ajax 脚本加载；所以我的代码是这样的:

<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>

问题:

如何使用事件委托(delegate)从 2 <span> 获取值并将其显示在input text total中单击compute button后？

---

我尝试过的:

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

我得到什么:

我没有收到警报，也没有在控制台中收到错误 (F12)。

Answer 1

阅读精细手册...

.val()

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

您可能想要.text()

我还将委托(delegate)添加到您的按钮，而不是跨度，即

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

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