0

我正在创建我的第一个 wordpress 小部件，并且在使用可在管理小部件页面中排序的 jquery ui 时遇到问题。

根据我的研究，WordPress 已经包含 jquery（和 jquery ui 库），但为了使用它，我必须使用 wp_enqueue_script。

我做到了。

但只有一些 jquery 代码有效。jquery ui 可排序不起作用。

这是我的 abc_categories_widget.js

jQuery(document).ready(function() {
    // The following doesn't seem to be working
    jQuery("#abc_product_categories_sortable").sortable({
        cursor: 'move'
    });

    // The below statements work as expected
    jQuery('#abc_product_categories_sortable').disableSelection();
    jQuery('#abc_product_categories_sortable li').disableSelection();
});

这是我的小部件的相关代码

    function form($instance) {
        wp_enqueue_script('abc_categories_widget_js', plugin_dir_url(__FILE__) . 'abc_categories_widget.js', array('jquery','jquery-ui-sortable'), '1.0', true);
        wp_enqueue_style('abc_categories_widget_css', plugin_dir_url(__FILE__) . 'css/jquery-ui-1.8.21.custom.css');

        $abc_categories = $instance['abc_product_categories'];

        global $wpdb;
        $product_categories = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'abc_categories', ARRAY_A);
?>
        <ul id="abc_product_categories_sortable" class="ui-sortable">
        <?php foreach($product_categories as $a_category) { ?>
            <li id="<?php echo 'cid_' . $a_category['category_id']; ?>" class="ui-state-default" style="padding:5px 10px"><?php echo $a_category['category_name']; ?></li>
        <?php } ?>
        </ul>
<?php
    }
}

任何人都知道可能是什么问题？

4

1 回答 1

1

我设法通过包装解决了我的<ul>问题<div>

即在php代码中

<div id="abc_product_categories_sortable">
        <ul id="abc_product_categories_sortable_list" class="ui-sortable">
        <?php foreach($product_categories as $a_category) { ?>
            <li id="<?php echo 'cid_' . $a_category['category_id']; ?>" class="ui-state-default" style="padding:5px 10px"><?php echo $a_category['category_name']; ?></li>
        <?php } ?>
        </ul>
<div>

在我的 javascript 代码中

jQuery(document).ready(function() {
    jQuery("#abc_product_categories_sortable ul").sortable({
        cursor: 'move'
    });

    jQuery('#abc_product_categories_sortable ul').disableSelection();
    jQuery('#abc_product_categories_sortable li').disableSelection();
});
于 2012-07-07T06:31:53.063 回答