Question

我创建了一些jQuery，它们从几个按钮之一中获取值，然后通过ajax加载相应的自定义帖子类型。每个按钮代表与帖子相关的类别。

这如下：

jQuery(function ($){
    jQuery('.btn').on('click', function(e){
        e.preventDefault();
        $.ajax({
            url:'/wp-admin/admin-ajax.php',
            data:('categoryfilter=' + $(this).val() + '&action=projects'),   //filter.serialize(),
            type:'POST', 
            beforeSend:function(xhr){
            },
            success:function(data){
                    $('#somediv').first().after(data);
            }
        });
        return false;
    });
});

“过滤器”按钮的html是：

<div id="myBtnContainer">
<form  method="POST" id="filter">
  <button class="btn active" value="all"> Show all</button>
  <button class="btn" value='Business' />Business</button>
  <button class="btn" value="Charity"> Charity</button>
  <button class="btn" value="education-research"> Education / Research</button>
  <button class="btn" value="Heritage"> Heritage</button>
  <button class="btn" value="health-environment"> Health / Environment</button>
</form>
</div>

这一切都很好，但是在页面加载时我需要加载一些内容。在单击过滤器按钮之一触发ajax之前，不会显示任何记录/帖子。

我试图给onclick函数起一个名字，但是我不能称它-例如：

jQuery(document).ready(function($){
//jQuery(function ($){

        alert ("test text");
        loadProjects();

    jQuery('.btn').on('click', function loadProjects(e){
    //jQuery('.btn').on('click', function(e){

如何转换当前代码以使其能够在页面加载时加载一些默认内容？

Answer 1

您应该可以执行以下操作来触发点击事件回调：

jQuery(function ($){
    jQuery('.btn').on('click', function(e){
        e.preventDefault();
        $.ajax({
            url:'/wp-admin/admin-ajax.php',
            data:('categoryfilter=' + $(this).val() + '&action=projects'),   //filter.serialize(),
            type:'POST', 
            beforeSend:function(xhr){
            },
            success:function(data){
                    $('#somediv').first().after(data);
            }
        });
        return false;
    });

    //trigger first btn's click event
    $('#filter .btn.active').trigger('click');
});

在页面加载时触发jQuery函数

1 个答案: