Question

Not sure what I’m doing incorrect. I have a function inside my custom jQuery plugin, and my browsers are telling me it’s undefined.

Can anyone see what I’ve done wrong inside:

(function($){

  $.fn.myCustomPlugin = function( ) {

    return this.each(function() {

        var theValue = $(this).text().trim().replace(/ /g,'');

        // STOP if theValue return nothing
        if (theValue === null || theValue === undefined || theValue == ""){ 
            $(this).html("nothing inside the span"); 
            return true; 
        }


        function clickActions()
        {
            alert("This alert shows when clicking on the element");     
            return false;
        }


        $(this).html('<a href="javascript:void(0);" onClick="clickActions()">'+theValue+'</a>');

    }); // eof .each


  };
})(jQuery);

The Html is simple phone numbers inside spans:

<span class="formatme">123-8749674</span><br />
<span class="formatme">123-8749674</span><br />
<span class="formatme">123-8749674</span><br />
<span class="formatme">123-8749674</span><br />
<span class="formatme">123-8749674</span><br />

<script type="text/javascript"> 
$(document).ready(function() {
    $('.formatme').myCustomPlugin();
});
</script>

the function clickActions() may be simply in the wrong place, but I’ve moved it around the plugin code, with the same results.

Answer 1

You can simply use

$(this).text(theValue).on('click', function(e){
    alert("This alert shows when clicking on the element");     
    return false;
});

Also following line

var theValue = $(this).text().trim().replace(/ /g,'');

should be $.trim()

var theValue = $.trim($(this).text()).replace(/ /g,'');

Working Example Here.