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

コードを内側にラップすることも非推奨のasの代わりにdocument.ready使用します。.on.bind.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>