How click div or class in JS from append

Question

Ok so what i tried to do is simple but not for me. I have account on bitcoin and i need create payment. For this method i have a filed and when user put amount and click Payment system connect by API to set payment and return code. This code a need put to data-code in my DIV and client should click again to make this payment. I want the user click only one after put amount and when i put data-code and show div with button i want button.clic() automaticly.

My first step is Create simple HTML, i have a tutorial from oficial example (PLEASE DONT PAY!!!)

<a href="#" class="my-custom-link">Show Me The Modal!</a><div class="coinbase-button" data-code="d070357b8c689f549bb13c3537303847" data-button-style="none"></div>

<script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $('.my-custom-link').click(function(){
      $(document).trigger('coinbase_show_modal', 'd070357b8c689f549bb13c3537303847');
      return false;
    });

    $(document).on('coinbase_payment_complete', function(event, code){
      console.log("Payment completed for button "+code);
      window.location = "/confirmation.html";
    });
  });
</script>

This code is correct and when i click Show modal is everything allright, but next i have NEXT button. When i click one this function in JS below is runing

<script>
$(function(){

    function preparePayment(event) {
        $('#makePayment').empty();
        $('#makePayment').append('<a href="#" class="my-custom-link">Show Me The Modal!</a><div class="coinbase-button" data-code="d070357b8c689f549bb13c3537303847" data-button-style="none"></div>');
            return false;
      }

      $( "#next" ).click(function() {
          //$( this ).empty();
          preparePayment();
          //$('#makePayment').click();
      });

});
</script>

Now when i click NEXT this div is empty and append code in .append() is show, but when i click Show The Modal! is nothing happen? Can You tell me what did i wrong ?

Instead of `$('.my-custom-link').click(function(){` use `$(document).on('click','.my-custom-link', function(){` — Satpal, Jun 24 '14 at 10:27

score 0 · Answer 1 · answered Jun 24 '14 at 10:27

0

Try to use event-delegation at this context,

$("#makePayment").on('click','.my-custom-link', function(){
   //your code goes here
});

answered Jun 24 '14 at 10:27

Balachandran

9,567
1
16
26

a found why is still not working but when i put my '' i need load '' so how can load this script by AJAX ? – user3733929 Jun 24 '14 at 13:16

score 0 · Answer 2 · answered Jun 24 '14 at 10:27

Since the my-custom-link class is added dynamically inside the preparePayment js method, you need to use event delegation to register the event handler like:

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', '.my-custom-link', function(event) {
    $(document).trigger('coinbase_show_modal', 'd070357b8c689f549bb13c3537303847');
    return false;
});

How click div or class in JS from append

2 Answers2