JQuery'.load（）'无效

Question

我正在尝试使用jQuery .load()函数，但我无法使用它。我正在使用Wordpress插件，我正在尝试根据传入的参数在options上设置属性（更具体地说，我正在尝试在选择框上设置默认选项） ）。

这是我正在尝试做的事情：

$("#schedule_timeslot").load(function(){
          //execute code to make changes to DOM
          //use conditional statements to figure out which DOM to adjust
});

这是HTML：

        <select id="schedule_timeslot" name="timeslot">
            <option name="8-10" class="schedule_time" value="0" id="ts0">8am - 10am</option>
            <option name="10-12" class="schedule_time" value="1" id="ts1">10am-12pm</option>
            <option name="12-2" class="schedule_time" value="2" id="ts2" >12pm - 2pm</option>
            <option name="2-4" class="schedule_time" value="3" id="ts3">2pm - 4pm</option>
            <option name="4-6" class="schedule_time" value="4" id="ts4" >4pm - 6pm</option> 
        </select>

我能够使用：

$(window).load(function(){
    alert("test"); 
});

任何人都可以告诉我为什么函数不起作用以及我需要做什么才能对特定元素执行函数？

Answer 1

<select>元素不会触发加载事件。加载事件会触发与URL关联的元素（通常需要单独的HTTP请求来获取资源），例如<script>标记，<img />标记，<iframe>标记等。

要在<select>上触发事件，只需将文档目标块中的元素作为目标：

$(document).ready(function () {
    $("#schedule_timeslot")....
});

或简写，

$(function () {
    $("#schedule_timeslot")...
});

这确保了DOM加载和准备好，并且当你使用jQuery定位它时元素将存在（假设这是最初加载到页面而不是通过ajax）。

修改

要在文档就绪上调用函数，只需在脚本标记或外部JavaScript表单中定义函数即可。在文档就绪块内，调用该函数。

例如：

<script type="text/javascript">
    function init() {
        alert("Hello, I am ready!");
    }

    $(function () {
        init();
    });
</script>

文档就绪块还提供了应用事件处理程序的位置。由于这些块在DOM完成加载时触发，因此您可以确保页面上加载初始页面加载（而不是通过ajax）的任何元素都将存在。

<script type="text/javascript">
    $(function () {
        $("#schedule_timeslot").on('change', function (e) {
           alert("I Changed!");
        });
    });
</script>

修改

要在选择框中设置默认选择，您将在jQuery中使用.val()。在文档就绪部分中调用.val()，如下所示：

<script type="text/javascript">
    $(function () {
        $("#schedule_timeslow").val(4);
        // This will select
        // <option name="4-6" class="schedule_time" value="4" id="ts4" >
        // as the option in the select box.
    });
</script>