javascript - 页面加载时触发 jQuery 函数

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');
});