2

私はjQueryMobile1.1.1を使用しており、Dialogsを使用しています。ダイアログを使用して、に追加する要素を選択しています<ul>。私はグーグルでSOで同様の問題を検索しましたが、今のところ運がありません。

複数の要素を追加するには<ul>、ダイアログを複数回開く必要があり、開くたびにダイアログを再作成する必要がないようにしています。私の問題はonClick、ボタンのイベントがOkButtonPopup何度もトリガーされることです（1回目は1回トリガー、2回目は2回トリガー、3回目は3回トリガーなど）。

なぜこれが起こっているのかわかりません...

以下は私に問題を与える（簡略化された）コードです。

<!doctype html>
<html>

<head>
    <title>Problem with Dialog re-use</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div data-role="header">
            <h1>Problem with Dialog re-use</h1>
        </div>
        <div data-role="content">
            <p><h2>Activated by</h2></p>
            <ul id="activate_ul">
                <!-- li to be added dynamically-->
            </ul>
            <a href="javascript:addPopup()" data-rel="popup" data-role="button">Add</a>    
        </div>
    </div>    
    <div id="myDialog" data-role="dialog">    
        <div data-role="header" data-theme="d">
            <h1>My Elements</h1>
        </div>    
        <div id="myDialogContent" data-role="content" data-theme="c">
            <p>Element Type</p>
            <select id="element-type">
                <!-- options to be added dynamically-->
            </select>
            <p>Element Name</p>
            <select id="element-list">
                <!-- options to be added dynamically-->
            </select>
            <a href="#" id="OkButtonPopup" data-role="button" data-rel="back" data-theme="b">Ok</a>
        </div>
    </div>
    <script type="text/javascript">
        var all_inputs = ["myInput1","myInput2","myInput3","myInput4"];
        var all_outputs = ["myOutput1","myOutput2","myOutput3","myOutput4"];
        var all_zones = ["myZone1","myZone2","myZone3","myZone4"];

        function updateInputList() {
            $('#element-list').empty();        
            for (var i = 0; i < all_inputs.length; i++ ) {
                $('#element-list').append('<option value="'+all_inputs[i]+'">'+all_inputs[i]+'</option>');
            }
        }

        function updateOutputList() {
            $('#element-list').empty();
            for (var i = 0; i < all_outputs.length; i++ ) {
                $('#element-list').append('<option value="'+all_outputs[i]+'">'+all_outputs[i]+'</option>');
            }
        }

        function updateZoneList() {
            $('#element-list').empty();
            for (var i = 0; i < all_zones.length; i++ ) {
                $('#element-list').append('<option value="'+all_zones[i]+'">'+all_zones[i]+'</option>');
            }
        }

        function removeByValue(arr, val) {
            for(var i=0; i<arr.length; i++) {
                if(arr[i] == val) {
                    arr.splice(i, 1);
                    break;
                }
            }
        }

        function addPopup() {
            $('#element-type').empty();
            $('#element-type').append('<option value="Input">Input</option>')
                            .append('<option value="Output">Ouput</option>')
                            .append('<option value="Zone">Zone</option>');    

            updateInputList();

            $('#element-type').change();        

            $('#element-type').on("change", function() {
                if ($("option:selected", this).attr('value') == "Input") {
                    updateInputList();
                }
                if ($("option:selected", this).attr('value') == "Output") {
                    updateOutputList();
                }
                if ($("option:selected", this).attr('value') == "Zone") {
                    updateZoneList();
                }

                $('#element-list').selectmenu('refresh');
            });

            // Event triggered too many times!! Why???
            $('#OkButtonPopup').on("click", function() {
                $('#activate_ul').append('<li>' + $('#element-list').val() +'</li>');

                // remove element from corresponding array
                if ($('#element-type').val() == 'Input' ) {
                    removeByValue(all_inputs, $('#element-list').val());
                }
                if ($('#element-type').val() == 'Output' ) {
                    removeByValue(all_outputs, $('#element-list').val());
                }
                if ($('#element-type').val() == 'Zone' ) {
                    removeByValue(all_zones, $('#element-list').val());
                }
            });

            $.mobile.changePage("#myDialog", { role: "dialog" });
        }
    </script>
</body>
</html>

どんな助けでも大歓迎です:)

4

1 に答える 1

6

addPopupを呼び出すたびに、クリックイベントをOkButtonPopupにアタッチし続けるため、イベントハンドラーが数回呼び出されます。バインドを介してイベントをアタッチし、バインドする前にバインドを解除することができます。あなたはこのようにそれを行うことができます：

$('#OkButtonPopup').unbind("click").bind("click", function() {
                $('#activate_ul').append('<li>' + $('#element-list').val() +'</li>');

                // remove element from corresponding array
                if ($('#element-type').val() == 'Input' ) {
                    removeByValue(all_inputs, $('#element-list').val());
                }
                if ($('#element-type').val() == 'Output' ) {
                    removeByValue(all_outputs, $('#element-list').val());
                }
                if ($('#element-type').val() == 'Zone' ) {
                    removeByValue(all_zones, $('#element-list').val());
                }
            });

または、addPopupで行う代わりに、pageshowにクリックイベントを添付することもできます。そうすれば、一度だけバインドできます。

于 2012-07-26T16:17:03.147 に答える