Creating jQuery Functions using $.fn.extend()

Question

I have little experience in using the $.fn.extend jQuery function; The code below is not working and it would seem that it would work as I've copy pasted it from this StackOverflow answer (jQuery Toggle Text?) The below code is as simple as I can get where the second function is not working... JSFiddle (http://jsfiddle.net/qxcwo51n/16/) however in my working example on a private site the 'toggle_active_iot' works but the extended function doesn't

$.fn.extend({
  toggleText: function(a, b) {
    return this.text(this.text() == b ? a : b);
  }
});

function toggle_active_iot(link) {
  $('.iot-items').toggleClass('active');
  $('.iot-products').toggleClass('active');
}

.iot-items,
.iot-products {
  display: none;
}

.active {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-md-12'>
  <h3 style='background-color:#151515;color:white;padding:10px;margin:0px;'>
    <i class="far fa-hdd"></i>&nbsp;Internet of Things
    <button onClick="$(this).toggleText('Items','Products');toggle_active_iot(this);">Items</button>
  </h3>
</div>
<div class='iot-items active'>
  Test Items
</div>
<div class='iot-products'>
  Test Products
</div>

It wont work in the fiddle because your code is in a onload event thus it is not global, and functions in event attributes like onclick need to be global. JSFiddle defaults to putting js code in the window's onload callback — Patrick Evans, Sep 07 '18 at 14:17
Yeah, I have no idea it was so simple and not working... it must be something entirely different throwing it off -- thanks Patrick Evans — coder42, Sep 07 '18 at 14:18
Your fiddle doesn't work as you've configured the JS to be placed in a window.load handler. Given the outdated use of the `on*` event attibute the functions needs to be at global scope, so change the settings to place the JS just before `
`: http://jsfiddle.net/qxcwo51n/28/. This is also why the snippet I added in to your question works. I would suggest you get rid of the `onclick` attribute and use proper unobtrusive event handlers, suich as jQuery's `on()` — Rory McCrossan, Sep 07 '18 at 14:18
Thanks Rory. I'll do that. Confirmed that it was indeed this issue ya'll are talking about. Thank ya'll — coder42, Sep 07 '18 at 14:35

score 0 · Accepted Answer · answered Sep 07 '18 at 14:58

Your fiddle doesn't work as you've configured the JS to be placed in a window.load handler. Given the outdated use of the on* event attibute the functions needs to be at global scope, so change the settings to place the JS just before : jsfiddle.net/qxcwo51n/28. This is also why the snippet I added in to your question works. I would suggest you get rid of the onclick attribute and use proper unobtrusive event handlers, suich as jQuery's on()

The question was answered in the comments and, since no one wrote an answer, I made this answer a community wiki answer. This is to remove this question from the unanswered list. The original answer was by @RoryMcCrossan. The OP is encouraged to select this as the answer to remove the questions status as unanswered. (If the person who answered in the comments decides to make an answer the OP can, and should, select that answer instead).

Creating jQuery Functions using $.fn.extend()

1 Answers1