在另一个js文件中获取html元素的值

Question

在我的索引页面中，我发送了一个请求ajax，响应是一个数字。我将响应设置为具有隐藏类型的input的值

<input type="hidden" id="Status">
<script src="js/indexPhone.js"></script>
<script>
$(document).ready(function() {
    $("#SendPhone").click(function(e) {
        var phoneField = $("#PhoneField").val();
        var phoneFieldString = "989" + phoneField.substring(0);
        $.ajax({
            type:'post',
            url:'getSMS.php',
            data:{'phoneFieldString':phoneFieldString},
            success:(function (response) {
                $("#Status").val(response);
            })
        })
    });
});
</script>

我的问题是我想在我包含在索引中的另一个javascript页面中获取此值，但它警报为空。 这是我的indexPhone.js：

$("#SendPhone").click(function() {
    alert($("#Status").val());
});

Answer 1

Ajax请求是异步的，因此第二次单击将在设置值之前运行。

使用事件：

// index.html
$("#SendPhone").click(function (e) {
    // ...
    $.ajax({
        // ...
        success: (function (response) {
            $("#Status").val(response);
            $("#Status").trigger("gotSMS");
        })
    });
});

// indexPhone.js
$("#Status").on("gotSMS", function () {
    alert($(this).val());
});