jquery - 如何将切换按钮翻转为 jQuery 函数

Question

以下函数对jQuery Mobile站点执行相同的操作，翻转切换按钮，使用它。

<script>
    function updateControls() {
        $.getJSON('/status.json', function(json) {
            $.each(json, function(key, value) {
                $('#'+key).val(value).slider('refresh');
            });
        });
    }

    $('select').bind('change', function(event) {
        element = event.target.id;
        if (element.substr(0, 6) == 'outlet') {
            eleid = element.substr(6, 2);
        }
        else {
            eleid = 0;
        }

        command = event.target.value;
        $.get('/cmd', { 'eleid' : eleid, 'cmd' : command });
    });
    $('#page1').bind('pageinit', updateControls);
</script>

Answer 1

内部包装代码document.ready也使用.on而不是.bindas.bind已弃用。

$('#page1').on('pageinit', updateControls);

Answer 2

修改后的代码版本：

<script>
    function updateControls() {
        $.getJSON('/status.json', function (json) {
            $.each(json, function (key, value) {
                $('#' + key).val(value).slider('refresh');
            });
        });
    }

    $('select').on('change', function (event) {
        element = event.target.id;
        if (element.substr(0, 6) == 'outlet') {
            eleid = element.substr(6, 2);
        } else {
            eleid = 0;
        }

        command = event.target.value;
        $.get('/cmd', {
            'eleid': eleid,
            'cmd': command
        });
    });
    $(document).ready(function () {
        updateControls();
    });
</script>

编辑

如果您想对提交按钮执行与选择相同的操作，则代码为：

<script>
    function updateControls() {
        $.getJSON('/status.json', function (json) {
            $.each(json, function (key, value) {
                $('#' + key).val(value).slider('refresh');
            });
        });
    }

    $('select').on('change', function (event) {
        element = event.target.id;
        if (element.substr(0, 6) == 'outlet') {
            eleid = element.substr(6, 2);
        } else {
            eleid = 0;
        }

        command = event.target.value;
        $.get('/cmd', {
            'eleid': eleid,
            'cmd': command
        });
    });


    $('input[type=submit]').on('click', function (event) {
        element = event.target.id;
        if (element.substr(0, 6) == 'outlet') {
            eleid = element.substr(6, 2);
        } else {
            eleid = 0;
        }
        command = event.target.value;
        $.get('/cmd', {
            'eleid': eleid,
            'cmd': command
        });

        $(document).ready(function () {
            updateControls();
        });
</script>

编辑 2

如果您想在按钮单击时发生事件：

<script>
    function updateControls() {
        $.getJSON('/status.json', function (json) {
            $.each(json, function (key, value) {
                $('#' + key).val(value).slider('refresh');
            });
        });
    }

    $('select').on('change', function (event) {
        element = event.target.id;
        if (element.substr(0, 6) == 'outlet') {
            eleid = element.substr(6, 2);
        } else {
            eleid = 0;
        }

        command = event.target.value;
        $.get('/cmd', {
            'eleid': eleid,
            'cmd': command
        });
    });


    $('input[type=submit]').on('click', function (event) {
        updateControls();
    });
</script>