Bind ajax created content to specific JS [duplicate]

This question already has an answer here:

• Event binding on dynamically created elements? 8 answers

Right now I'm loading data from another page which should respond to a AJAX catching the clicks from the elements the AJAX creates. But for some reason the button action is not caught by the JavaScript script. What should I do to make the new elements execute the JavaScript that they should? I have the following code:

function ShowMoreProdcuts(){
        scrollNode = $('.product#more').last();    
        scrollURL = $('.product#more p a').last().attr("href");
        if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
          $.ajax({
            type: 'GET',
            url: scrollURL,
            beforeSend: function() {
              scrollNode.clone().empty().insertAfter(scrollNode).append('<img class="img-responsive" src=\"{{ "http://ift.tt/1IK5DcS" }}\" />');
                                                                        scrollNode.hide();
            },
            success: function(data) {
              // remove loading feedback
              scrollNode.next().remove();
              $('#moreProducts').remove();
              var filteredData = $(data).find(".product");
              filteredData.insertBefore( $("#product-list-foot") );
            },
            dataType: "html"
          });
        } else {
            $('#moreProducts').hide();
        }
      }

      $(document).ready(function () {
        /*$(window).scroll(function(){
          $.doTimeout( 'scroll', 200, ScrollExecute);
        });*/
        $('.moreProducts').on("click", function() {
          ShowMoreProdcuts();
        });

The AJAX loads more elements into the container. These elements have a from which should trigger a JQuery AJAX. But the buttons are not working. What am I doing wrong? Am I missing something?

I'm using the JQuery .on() function, but the buttons are still not answering to the other JQuery handler. I'm not trying to add the button that loads moreProducts, but another button that comes in the HTML which the AJAX gets that is supposed to be bound to another JQuery AJAX function.

The other JQuery listens for a submit with a certain class:

$('form[action="/cart/add"]').submit(function(e) {

But with the new elements created by the AJAX syntax, this function does not execute when the Submit button is clicked.

I'm not binding the click of the class .moreProducts to the same function click, but I want to bind a submit button to the function which I stated above.

P.D. Its not the same question as the duplicated I think or I am missing something. Cause I'm trying to bind another element to be heard by another function. When the content is created by the ajax. the button which loads more products work, BUT the function which hears if there is a submit does not. What am I doing wrong?