我正试图在wordpress wiget管理面板中实现这一点:http://jsfiddle.net/George02/mkuxcwf5/1/
问题是jQuery似乎不起作用。
public function form( $instance ) { ?>
<?php
wp_register_script(\'customscript\', get_template_directory_uri() . \'/widgets/custom_widget/widget.js\', array(\'jquery\'), null, true);
wp_enqueue_script(\'customscript\');
?>
<div id="wrapper">
<ul id="category-list">
</ul>
<div id="add-category">
<select id="categories">
<option>Option 1</option>
<option>Option 2</option>
</select>
<div id="btn-add">Add category</div>
</div>
</div>
<?php }
小部件。js包含fiddle中的代码。如果我
View Source
在页面的开头部分,似乎有脚本,如果打开控制台,我可以看到log from document ready函数。我认为问题是wordpress不允许我向DOM中添加项,因为当我检查$list元素时,我可以看到他有一个
<li>
在里面。我是对的还是别的什么?
最合适的回答,由SO网友:Tarida George 整理而成
下面是发生的情况:
当您创建一个小部件并在函数中初始化它时。php他将被放置,以及它的所有内容(这意味着来自public function form( $instance )
), 进入<div id="widget-list">
(管理面板左侧列出所有小部件的区域)。因此,当您将其拖到小部件区域时,管理面板上将有其中的两个。一个放置在<div id="widget-list">
和一个<div id="widget-area">
. 因此,您的jQuery脚本只需要与小部件区域中的小部件一起工作,因此您需要在脚本中包含类似$(“#widget area.other selector”)的内容。
从我上面写的内容中可以很容易理解的另一件事是,所有div(元素)必须class
es和notid
s