CODEWITHSUNDEEP
javascriptjqueryfancybox
Volatil3
Volatil3

Reputation: 15016

How to attach Click event with a button on popup fancybox>

I am not being able to attach Click Event with a Popup form that contains an input button. Code is given below:

<a id="btnEditSummary" href=#>Edit Summary </a>
<div id="editSummary" class="hidden">
     <input type=button id="btnEdit" value="Update" />
    </div>

function openPoPup(clickHandle,contentHandle,width,height)
{
    width = typeof a !== 'undefined' ? a : 600;
    height = typeof b !== 'undefined' ? b : 300;

    $.fancybox(
        $(contentHandle).html(),
        {
            'width'             : width,
            'height'            : height,
            'minWidth'          :  width,
            'minHeight'         :  height,
            'autoScale'         : true,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'hideOnContentClick': false,
            'onStart': function () {
                //On Start callback if needed
            }
        }
    );
}    
$("#btnEditSummary").click(function()
            {
                openPoPup('#btnEditSummary','#editSummary',300,300);

                $( "#btnEdit" ).on( "click", function() {
                    alert( $( this ).text() );
                });

            }
    $( "#btnEdit" ).on( "click", function() {
                    alert( $( this ).text() );
    });

Upvotes: 0

Views: 3878

Answers (1)

JFK
JFK

Reputation: 41143

The problem with your method is that you are actually displaying in fancybox a clone of your #editSummary selector, passed as parameter within the openPoPup() function so the click event is bound to the original selector in your document flow but not to the clone inside fancybox.

As a workaround, you could use the fancybox onComplete callback (I am assuming you are using v1.3.4 because the API options in your code) to bind the click event to the element #btnEdit inside fancybox like :

function openPoPup(clickHandle, contentHandle, width, height) {
    width = typeof a !== 'undefined' ? a : 600;
    height = typeof b !== 'undefined' ? b : 300;

    $.fancybox($(contentHandle).html(), {
        width: width,
        height: height,
        // minWidth: width, // not valid in v1.3.x but 2.x
        // minHeight: height, // not valid in v1.3.x but 2.x
        autoScale: true,
        transitionIn: 'none',
        transitionOut: 'none',
        hideOnContentClick: false,
        onStart: function () {
            //On Start callback if needed
        },
        onComplete: function () {
            // bind click event to element inside fancybox
            $("#fancybox-content").on("click", "#btnEdit", function () {
                alert("click event bound");
            });
        }
    });
}
jQuery(document).ready(function ($) {
    $("#btnEditSummary").click(function () {
        openPoPup('#btnEditSummary', '#editSummary', 300, 300);
    });
}); // ready

Notice I am using .on() in its delegated form :

$("#fancybox-content").on("click", "#btnEdit", function (){ ... });

See JSFIDDLE

Upvotes: 1

Related Questions