-1

I have a script that pulls in a form and I want to perform a click action once that button has been clicked, however because I'm including the form via a script, I can't seem to get the jQuery on my server to interact with it - perhaps because that's the way jQuery works, but is there any way, or a work around, where I can get a click event to work on a form element that has been included via a script?

The JS

<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>

My JS 

    $(".actions input").click(function() {
        $(".pop-up").hide();
        $(".pop-up-thanks").show();
    });
tutankhamun
  • 880
  • 2
  • 11
  • 21
Nikki Mather
  • 1,118
  • 3
  • 17
  • 33

1 Answers1

2

Delegate event handlers for dynamic objects

You are targeting an element which is being dynamically inserted, therefore the event must be delegated. We can delegate it by using the on() method, which must be bound to a static object to achieve delegation. We could bind on() to (document), but it's advisable to use a closer scoped object such as $("#parent") to be performant. 

$("#parent").on( "click", ".actions input", function() {
    $(".pop-up").hide();
    $(".pop-up-thanks").show();
});

bind(), live() and delegate() are predecessors of on(). At the moment, only .live() has been deprecated in favor of on(), while bind() and delegate() continue to coexist with on -- though on() is preferred.

.bind() method

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

.delegate() method

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation.

.live() method

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

Jack
  • 1,901
  • 1
  • 19
  • 32