Question

我正在使用jQuery Mobile 1.1.1并使用Dialogs。我正在使用对话框选择要添加到<ul>的元素。我用Google搜索并搜索了类似的问题，但到目前为止还没有运气。

要向<ul>添加多个元素，我需要多次打开对话框，并且每次打开时都要避免重新创建对话框。我的问题是我的onClick按钮的OkButtonPopup事件触发了太多次（第一次，它触发一次，第二次，触发两次，第三次触发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>

非常感谢任何帮助：）

Answer 1

每次调用addPopup时，都会继续将click事件附加到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());
                }
            });

或者您也可以在pageshow上附加click事件，而不是在addPopup中执行。这样你只绑定一次。

按钮onClick事件在jQuery Mobile Dialog中触发了太多次

1 个答案: