Live click event

Question

Can someone point out to me how to make the ask class into a live click event.

$('.ask').jConfirmAction( {
    question : "Are you sure you want to delete the selected row?", 
    yesAnswer : "Yes", 
    cancelAnswer : "No", 
    onYes: function(evt) { 
      contentpages(evt.target); 
    }
});

Unless its on this page:

 /*
 * jQuery Plugin : jConfirmAction
 * 
 * by Hidayat Sagita
 * http://www.webstuffshare.com
 * Licensed Under GPL version 2 license.
 *
 */
(function($){

jQuery.fn.jConfirmAction = function (options) {
    var theOptions = jQuery.extend( {
        question: "Are You Sure ?",
        yesAnswer: "Yes",
        cancelAnswer: "Cancel",
        questionClass: "question",
        yesClass: "yes",
        cancelClass: "no",
        onYes: function() {}   // for specifying a function to call when the "yes" button is clicked
    }, options );

    return this.each( function() {

        $(this).bind('click', function(e) {
            e.preventDefault();

            if($(this).next('.' + theOptions.questionClass).length <= 0) {
                $(this).after('<div class="' + theOptions.questionClass + '">'+theOptions.question+'<br/><span class="' + theOptions.yesClass + '">'+theOptions.yesAnswer+'</span><span class="' + theOptions.cancelClass + '">'+theOptions.cancelAnswer+'</span></div>');

                $( '.' + theOptions.yesClass ).bind('click', function( evt ) {
                    theOptions.onYes( evt );
                    $(this).parents( '.' + theOptions.questionClass ).fadeOut( 300, function() {
                        $(this).remove();
                    } );
                });

                $( '.' + theOptions.cancelClass ).bind('click', function(){
                    $(this).parents( '.' + theOptions.questionClass ).fadeOut( 300, function() {
                        $(this).remove();
                    } );
                });
            }

            $(this).next( '.' + theOptions.questionClass ).animate( { opacity: 1 }, 300 );
        });

    } );
}

})(jQuery);

Answer 1

If you do not want to change the code for the plugin simply initialise it after you put ".ask" elements in the page. e.g.

$("<div class='ask'>Ask me</div>").appendTo(".container").jConfirmAction({...});

If you want the plugin to register events on non existant elements you need to modify it to take a selector name as a parameter and generally registering the live event - this is a quick and dirty way

/*
 * jQuery Plugin : jConfirmAction
 * 
 * by Hidayat Sagita
 * http://www.webstuffshare.com
 * Licensed Under GPL version 2 license.
 *
 */
(function($){

 $.extend({
        jConfirmAction: function (options) {
                // Some jConfirmAction options (limited to customize language) :
        // question : a text for your question.
        // yesAnswer : a text for Yes answer.
        // cancelAnswer : a text for Cancel/No answer.
        var theOptions = jQuery.extend ({
            question: "Are You Sure ?",
            yesAnswer: "Yes",
            cancelAnswer: "Cancel",
            targetSelector : ".sample_selector"
        }, options);


            $(theOptions.targetSelector).live('click', function(e) {

                e.preventDefault();
                thisHref    = $(this).attr('href');

                if($(this).next('.question').length <= 0)
                    $(this).after('<div class="question">'+theOptions.question+'<br/> <span class="yes">'+theOptions.yesAnswer+'</span><span class="cancel">'+theOptions.cancelAnswer+'</span></div>');

                $(this).next('.question').animate({opacity: 1}, 300);

                $('.yes').bind('click', function(){
                    window.location = thisHref;
                });

                $('.cancel').bind('click', function(){
                    $(this).parents('.question').fadeOut(300, function() {
                        $(this).remove();
                    });
                });

            });
        }
    });




})(jQuery);

and you initialise it like so

        $(document).ready(function() {

    //specify what selector you want - all the other options still work     
    $.jConfirmAction({targetSelector: ".sample_selector"});

//add an element
                $("<div class='sample_selector'>Ask me</div>").appendTo("#container");


        });