Question

我有一个创建动态<select>的函数。我必须使它成为多个选择选项，所以我也必须初始化它。

多次调用该函数;这是功能：

function renderTimezoneFilterStringCriteria($filterKey,$onChange,$r,$c,$for)
    {

        echo '<script>
                $(document).ready(function()
                {
                    $("#zoneFilter_criteria_'.$for.'_'.$r.'_'.$c.'").multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: true,
                    enableCaseInsensitiveFiltering: true,
                    maxHeight: 150
                 });
                });
                </script>'.'<div class="time_zone_list"><select name="rules['.$r.']['.$c.']['.$for.'_timezone]" class="input_field zonefield" id="zoneFilter_criteria_'.$for.'_'.$r.'_'.$c.'"  style="width:30%; margin-right:5px; float:left;">';
        foreach ($this->timezoneArrayNotDefault as $k => $val) {
            $selected = '';

             $val_array = explode(")",$val);
            if (isset($val_array[1]) && trim($val_array[1]) == trim($filterKey)) {
               echo $selected = SELECTED;
            }

            echo '<option value="' . $val . '"' . $selected . '>' . $val . '</option>';
        }
        echo '</select></div>';
    }

现在，正如你所看到的，html是作为php字符串制作的（我的客户说通过这种方式，html加载速度更快，因此他使用了这种技术，并且U无法说服他改变另一种方式。 / p>

现在让我们来谈谈：如果函数被多次调用，那么它也会导致多个$（document）.ready（function（）{}）;

有什么办法，我只能$(document).ready(){});并以其他方式初始化多个下拉菜单？

Answer 1

设置标志变量。

$firstCall = TRUE;
renderTimezoneFilterStringCriteria($filterKey,$onChange,$r,$c,$for, &$firstCall);

检查一下：

function renderTimezoneFilterStringCriteria($filterKey,$onChange,$r,$c,$for, &$firstCall)
    {
        if($firstCall) {
            echo '<script> $(doucment).ready(function() { ... '; 
            //your document.ready here
            $firstCall = FALSE;
        }
    // your other stuff here
    }

UPD：更好的解决方案可能是制作单个功能，回复你的文件。已经调用一次。

Answer 2

以下是添加新html时重新绑定代码的示例。

http://jsfiddle.net/64e41LL9/

HTML

<div id="container">
   <button class="button-item">I am a button</button>
</div>
<br/>
<button id="add-html" >add button</button>
<br/>
<button id="rebind" >rebind</button>

Jquery的

$(document).ready(function(){

    //function to rebind
    function rebind() {
        $('.button-item').click(function(){
           alert("Im binded");
        })             
    }

    //initial bind on page load
    rebind()

    //adding new html thats unbinded
    $("#add-html").click(function(){
         $("#container").append('<button class="button-item">I am a button</button>')
    })

    //calls function to bind new html 
    $("#rebind").click(function(){
        rebind()
    })

})

如此重要的是，当页面加载时，您最初会将警报代码绑定到按钮，但是当您向页面添加新的html时，您会看到新按钮不会触发点击事件，即使它有同一个班级。这是因为它没有绑定。单击该重新绑定按钮后，它将重新绑定该类（按钮项）的所有按钮。您可以使用相同的概念，但每次添加动态html时它都会调用重新绑定功能。

如何组合多个$（document）.ready（）函数

2 个答案: