Hi Everyone,

I have a javascript function below:

function submitUserInfo()

    if (myForm.validator.validate())
        var data = $('get-user-info').serialize(true);

        var params = data;
        var url = 'http://www.mysite/engine/';

        var request = new Ajax.Request(url,
                method: 'post',
                parameters: params,
                onSuccess: function (transport) {


                    $('paywall-img').innerHTML = '';
                    $('paywall-img').insert('<button class="button close-pw"><span>Cancel</span></button>');

                onFailure: function () {

However, this function the jquery below was not called after the button added by insert is clicked.

<script type="text/javascript">
    ( function($) {
        $(document).ready( function() { 
              alert('Close #paywall-img');
    } ) ( jQuery );

Can you please give advise what is wrong with this set up. Thanks in advance.

Hi, you're adding the event handler to ".close-pw" before it's been inserted, that's why it doesn't trigger.

Should work with this:

$("#paywall-img").on("click", ".close-pw", function(){
    alert('Close #paywall-img');

Or, another way it's to add the handler at the creating of the object:

$('<button class="button close-pw"><span>Cancel</span></button>')
    .click(function() {

On additional note your are not using the full selector in $('paywall-img'), it's missing the #.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.