无法将jsfiddle创建转移到网站

时间:2013-03-18 16:25:45

标签: javascript jquery wordpress jsfiddle

我正在尝试将jsfiddle创建转移到我的网站,但我无法这样做。这是它的链接:

http://jsfiddle.net/mDc7p/213/

/* 
    Eventbrite Examples - organizer event list

    If you copy this code, please set your own API Key in the example below.
    You can request one here: http://www.eventbrite.com/api/key
*/

Eventbrite({'app_key': "HSMTSI2CUDKAXFTXX2"}, function(eb){

    // define a few parameters to pass to the API
    // Options are listed here: http://developer.eventbrite.com/doc/organizers/organizer_list_events/
    var options = {
        'id'    : "1667880002"
    };

    // provide a callback to display the response data:
    eb.organizer_list_events( options, function( response ){
        $('.event_list').html(eb.utils.eventList( response, eb.utils.eventListRow ));
    });
});

我尝试将<script type="text/javascript"></script>标记内关闭的javascript代码添加到我的header.php,footer.php和模板文件的底部(我在该特定页面上使用的那个但是它不是&# 39;工作。添加javascript代码后,我在页面内容区域添加<div class="event_list"></div>作为我希望代码工作的地方,但它不起作用。我包括jquery头文件标题内的header.php文件中的库。我也尝试了将代码添加到javascript顶部的onLoad方法,但遗憾的是,它没有用。请帮助我

P.S我的网站正在运行Wordpress。

2 个答案:

答案 0 :(得分:2)

你把它包装在document.ready中了吗?你的jQuery不会对加载时不存在的元素起作用。

$(document).ready(function() {
    ...
});

或简写

$(function() {
    ...
});

答案 1 :(得分:2)

为在DOM Ready上运行的代码设置了小提琴。因此,您需要在onready调用中将代码包装在JavaScript部分中。

<script>
$(function() {

    /* 
        Eventbrite Examples - organizer event list

        If you copy this code, please set your own API Key in the example below.
        You can request one here: http://www.eventbrite.com/api/key
    */

    Eventbrite({'app_key': "HSMTSI2CUDKAXFTXX2"}, function(eb){

        // define a few parameters to pass to the API
        // Options are listed here: http://developer.eventbrite.com/doc/organizers/organizer_list_events/
        var options = {
            'id'    : "1667880002"
        };

        // provide a callback to display the response data:
        eb.organizer_list_events( options, function( response ){
            $('.event_list').html(eb.utils.eventList( response, eb.utils.eventListRow ));
        });
    }

);    
});
</script>