0

我正在尝试使用该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"); 
});

谁能告诉我为什么该功能不起作用以及我需要做什么才能在特定元素上执行功能？

4

1 回答 1

2

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

要在 a 上触发事件<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>

编辑：

要在选择框上设置默认选择，您将.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>
于 2013-11-13T22:40:14.107 回答