Question

我想触发点击按钮。但是问题在于，点击事件总是会在按钮加载之前触发

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(document).ready(function(){
  $('.custom_button').click(function(){
    alert('show');
  });
  $('.custom_button').click();
  $('body').append('<button class="custom_button">abc</button>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何执行此操作，以便每次将按钮加载到页面中时都会触发$('.custom_button').click();？

Answer 1

添加click事件并在$('.custom_button').ready内部调用。您可以在创建click事件

后的click之后调用该函数。

$(document).ready(function(){
  
  
  $('.custom_button').ready(function(){
    
    $(this).click(function(){
       alert('show');
    });
    $(this).click();  
    
  })
  $('body').append('<button class="custom_button">abc</button>');
  
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

将$('body').append('<button class="custom_button">abc</button>');行移到$(document).ready内的顶部，然后它将起作用。

代码的问题是您要分配click事件并在实际创建该元素之前触发它。因此它将不起作用。

$(document).ready(function(){
  $('body').append('<button class="custom_button">abc</button>');
  $('.custom_button').click(function(){
    alert('show');
  });
  $('.custom_button').click();      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用setTimeout

$(document).ready(function(){
  setTimeout(function() {
    $('.custom_button').click(function(){
      alert('show');
    });
    $('.custom_button').click();
  }, 100);
  
  $('body').append('<button class="custom_button">abc</button>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

定义第一个按钮生成代码，然后定义单击事件。

  $(document).ready(function(){
      $('body').append('<button class="custom_button">abc</button>');
          $('.custom_button').click(function(){
            alert('show');
          });
          $('.custom_button').click();

        });

Answer 4

您可以创建一个函数并从中返回一个Promise。内部承诺解决方法创建按钮，完成后使用jquery trigger触发click。

此外，您需要使用on

委托事件

function addButton() {
  return new Promise(function(resolve, reject) {
    resolve($('body').append('<button class="custom_button">abc</button>'));
  })

}

$('body').on('click', '.custom_button', function() {
  alert($(this).text());
});

addButton().then(function(d) {
  $('.custom_button').trigger('click')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 5

您也可以尝试此方法。

$(document).ready(function() {
  $('body').on('click', '.custom_button', function() {
    console.log('show');
  });
  $('body').append('<button class="custom_button">abc</button>').ready(function() {
    $('.custom_button').click();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 6

您必须将html代码放在任何jquery代码加载之前。每当您的DOM准备好HTML内容，然后再调用该触发函数。

$(document).ready(function(){

   $('body').append('<button class="custom_button">abc</button>');
  
   $('.custom_button').click(function(){
        alert('show');
   });
  
   $('.custom_button').click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

内容准备好后如何触发点击？

6 个答案: