如何使用事件委托？

Question

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

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

问题：

如何使用事件委托从2个<span>中获取值并在点击compute button后显示在input text total中？

---

我尝试过的：

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

.val()方法主要用于获取input、select、textarea等表单元素的值。

你可能想要.text()

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

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

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