How to use user defined function for jquery chaining

Question

My requirement is like jquery chaining with user defined function

I tried following code.

var content = $('<div />', {
  'id': 'pia_editable_'
}).change(function(e) {
  alert('change called');
}).condchain(some values);

function condchain(v) {
  alert('hh');
}

It is throwing not defined function error

fdomn-m · Accepted Answer · 2019-05-14 07:50:42Z

2

So that jQuery recognises your function, it needs to be added to $.fn.

$.fn.condchan = function() { };

this then gives you access to this which would be the current jquery context, eg:

$.fn.myFunc = function(txt) { var that = this; setTimeout(function() { that.text(txt) }, 500); };
$("#div").myFunc("changed");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='div'>text</div>

In order to add chaining you simply need to return this. You can also use $(this).each... if you want to do anything more than a bulk operation, eg:

$.fn.myFunc = function(txt) { 
  // this = jquery context
  $(this).each(function(i, e) {
    // this now = loop iteration
    var that = $(this); 
    setTimeout(function() { that.text(txt) }, 500 * (i + 1)); 
  });
  return this;
};

$(".div").myFunc("changed").css("color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='div'>text</div>
<div class='div'>text</div>

There's more you can do to create a fully fledged reusable plugin and this page should be your starting point: https://learn.jquery.com/plugins/basic-plugin-creation/

answered May 14, 2019 at 7:50

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

deepak mishra Over a year ago

i tried, but still getting this error. Uncaught TypeError: $(...).change(...).condchain is not a function at PostItAll.create (jquery.postitall.js:2417) at PostItAll.init (jquery.postitall.js:967) at jquery.postitall.js:656

fdomn-m Over a year ago

Can you create a fiddle at jsfiddle.net to demonstrate it not working?

fdomn-m Over a year ago

You need to make sure $.fn.condchain code is before $(..).condchain(), example: jsfiddle.net/nojsfk5c (it's after in your original code)

fdomn-m Over a year ago

Have a read of minimal reproducible example. I'm not asking for your library, I'm asking for a snippet that demonstrates it not working as I've provided a snippet showing that it does work - so there must be something different in your code that you've not told us

Snow · Accepted Answer · 2019-05-14 07:35:09Z

2

Put the function on $.fn instead:

$.fn.condchain = function condchain(v) {
  alert('hh');
}
var content = $('', { 'id': 'pia_editable_' })
  .change(function(e) {
    alert('change called');
  })
  .condchain(some values);

answered May 14, 2019 at 7:35

Snow

4,1463 gold badges16 silver badges43 bronze badges

Comments

Sanu · Accepted Answer · 2019-05-14 07:46:07Z

1

All you have to do is extend JQuery functions with your custom functions like in the above comment you can use $.fn.<some_function_name> = function(params){}; to extend native jQ functions Please refer What does $.fn mean in jQuery? for more details.

Thanks, Happy Coding <3 !

answered May 14, 2019 at 7:46

Sanu

314 bronze badges

Collectives™ on Stack Overflow

How to use user defined function for jquery chaining

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related