-3

I wanna trigger click on button. But the problem is the click event will always triggered before the button is loaded

<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>

How to do this so the $('.custom_button').click(); will be trigger whenever the button is loaded into page?

My real name
  • 535
  • 1
  • 5
  • 17
  • 1
    To be generous, this sounds like an [XY Problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem): why do you want to click a button when the page loads, instead of just calling whatever function is bound to the click? – msanford Feb 12 '19 at 04:52
  • you are clicking the button and attaching the event BEFORE you add the button. Your order of actions "On document ready. Bind an event handler to X, Click X, and Create an element X and add it to the page." It is like eating a sandwich before you make it. – epascarello Feb 12 '19 at 04:53
  • @msanford i can''t describe my real problem its to complicated here but i made a simple case that similar to my problem – My real name Feb 12 '19 at 04:54
  • From comments on answers it seems you don't want to change the order of things. That is you want to trigger a click event on an element before it exists... *you can't do that* – Jon P Feb 12 '19 at 05:45
  • If it's triggering an action when an element is added to the DOM .... again you will face issues: https://stackoverflow.com/questions/7434685/event-when-element-added-to-page – Jon P Feb 12 '19 at 05:48
  • 1
    From the comments, especially the "I made a simple case" comment - this is not the actual scenario you have, I think simplifying it has hidden the issue. You appear to be looking to trigger code when the DOM is changed - you might be able to use a Mutation Observer: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver – freedomn-m Feb 12 '19 at 05:51

6 Answers6

2

add click event and call it inside $('.custom_button').ready.You can call the function after click after creating click event 

$(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>
Maheer Ali
  • 35,834
  • 5
  • 42
  • 73
1

Move $('body').append('<button class="custom_button">abc</button>'); line to top inside $(document).ready then it will work.

The problem with your code is you are assigning click event and triggering it before actually creating that element. So it will not work. 

$(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>

With 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>
Karan
  • 12,059
  • 3
  • 24
  • 40
1

Define the first button generate code, then define click event.

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

        });
Gowtham Alan
  • 234
  • 3
  • 15
1

You can create a function and return a Promise from it. Inside the promise resolve method create the button, and once it is done use jquery trigger to trigger click.

Also you need to delegate the event by using 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>
brk
  • 48,835
  • 10
  • 56
  • 78
1

You can also try this method.

$(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>
Shubham Baranwal
  • 2,492
  • 3
  • 14
  • 26
0

You have to just put your html code before any jquery code load. Whenever your DOM is ready with your html content before that trigger function is called. 

$(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>
Smithiam
  • 162
  • 1
  • 16