button in insert in div via javascript

[jamojo]

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

                    //alert(transport.responseText);

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


                }.bind(this),
                onFailure: function () {
                }.bind(this)
            }
        );
    }
}

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() { 
            $(".close-pw").click(function(){
              alert('Close #paywall-img');
              $("#paywall-img").hide();
            });
        });
    } ) ( jQuery );
</script>

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

[AleMonteiro]

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');
    $(this).parent().hide();
});

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() {
        alert("Closing");
        $(this).parent().hide();
    })
    .apeendTo("#paywall-img");

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