javascript - 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> 上触发事件，只需将元素定位到文档就绪 block 中即可:

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

或简写，

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

这可以确保 DOM 已加载并准备就绪，并且当您使用 jQuery 定位元素时，该元素将出现(前提是该元素最初加载到页面上，而不是通过 ajax)。

编辑:

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

例如:

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

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

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

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

编辑:

要设置选择框的默认选择，您可以使用 .val()在 jQuery 中。在文档准备部分中调用 .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>