pie6k / jquery.initialize Goto Github PK

While investigating #42, I noticed that our find/match algorithm could be improved by using closest.

For example:

const element = addedNode.closest(selector)
  || addedNode.querySelector(selector);

I think there is a performance issue with this implementation.
the code

$.each(mutation.addedNodes, function(i, addedNode){ target = target.add(addedNode); });

will have very bad performance when the addedNodes length goes to thousands.
the performance might related to jquery, but we can void by just use a pure javascript array instead of the jquery object to hold the target.

You can repeat this issue at
https://jsfiddle.net/liuhongbo/f8moz1cz/

There is currently no comprehensive test suite.

This makes it near impossible to ensure that nothing breaks whilst making changes.

It would be nice if the plugin would be available via npm.

would be great if we could have a bower package :)

I am getting the error $.initialize is not a function. Why am I getting this?

Discussion on how to implement a small website for hosting documentation and an interactive demo based on test.html, but more thorough.

Hello, I'm trying to get the index number of the elements out in the $.initialize loop, like this:

$.initialize('.element', function(i,el) { 
  console.log(i) // this always return: 0 
});

What I want to achieve, is the same functionality as $.each or $.map to count and distinguish the elements in the DOM, but I keep getting 0 on index, however the DOM nodes are shown correctly on el.

Is there a solution for this?

Hi,
Is there a way to unsubscribe from the initialize? It keeps firing when the target control is removed and added back to the DOM.
thx!

Hey Folks!

jquery.initialize was a little idea I had quite a while ago. I'm glad many of you have liked it. It has changed since then a bit thanks to contributors.

As my tech stack has changed towards React based technologies, I'm not really focused on maintaining it.

As it seems to be useful, I'd thought it'd be nice idea to find some maintainers that would be able to focus on issues, publishing to packager managers like npm or bower etc.

Let me know if any of you could take it!

I'm getting the following error:

Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at MutationObserver.

My implementation is fairly standard I believe...

$(".cart-item-price .money").initialize( function(){
	if ($(this).html().indexOf('taxes') !== -1) {
		$(this).append('<span> + taxes</span>');
	}
});

Current build does not workin in FF 58.
The bug has been committed as version 1.1.0 which is not correct, since code changed.

Have a look here and be more careful with releases please!
https://semver.org/

<div class="class-1 class-2"></div>
<div class="class-1 class-2"></div>
<div class="class-1 class-5555"></div>
<div class="class-2 class-88"></div>

i want just handle class-1 and class-2 divs both initialize; is it possible ?

$.initialize(".class-1.class-2", function() {
alert("selectect classes was initialized");
});

Hello pie6k,

Recently, I update initialize() to the new version 1.1.0 that uses the function .foreach in lines 100, 102, 118 and 120.

With new browser all is ok but old versions of chrome don't support the use of .forEach() over objects so I've got a lot of errors in console and unspected behaviours...

I've corrected manually this issue changing .forEach with a classical structure for() and all programmes run perfectly...

the first example (for the line 100) of my 4 modifications is this next one

your code:
mutations[m].target.parentElement.querySelectorAll(msobserver.selector).forEach(push);

my code:
var elements = mutations[m].target.parentElement.querySelectorAll(msobserver.selector);
for ( var i = 0; i < elements.length; i++ )
push ( elements[i] );

Could you consider to introduce this little 4 changes... or perhaps ( I'm sure ) you already find a solution even better.

Thanks in advance,

Joan Miquel

Hello, I would like to use Jquery selectors with this plugin. This is some of the code I have right now

var $labels = $(".form").not(".form--distributor").find("label");

  $.initialize($labels, function() {
    if($(this).parents('.label-auto-width').length) {
      return false;
    } else {
      $(this).css("min-width",maxWidth + "px")
    }
  });

It seems to work, but it throws some messages in the console

This is a warning:

 jQuery.Deferred exception: selector.trim is not a function TypeError: selector.trim is not a function

and this is an error:

Uncaught TypeError: selector.trim is not a function

I kind a thought I could try to fix it myself, but I'm not sure about the $.trim() function in the selector.

I think jquery selectors should work without errors.

Add console warning for old API from #6.

Hi,
I'm using initialize on lightslider this way:

$.initialize(".white-text.lslide.active", function() {
	$("#about").css("color", "white");
});
$.initialize(".black-text.lslide.active", function() {
	$("#about").css("color", "black");
});

It works perfectly, but if I go back on the slider or go through all slides, it will stop working. Any tips?

Is the WeakMap polyfill still required? It's referenced in the README but I could not find any usage of WeakMap in the code.

Thanks!

Whenever I add an attribute to the <html> tag, I get Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll') thrown on

I was not able to get this to work as is with jquery 3.1.1. I tracked the issue down to line 51:
msobservers.initialize(this.selector, callback);
In that call, this.selector is null. It seems selector has been deprecated: https://api.jquery.com/selector/

When I reworked the code to just pass selector and callback everything started working.

Version number should ALWAYS be bumped on push.

i'm moving my project to webpack2 and have a problem with jQuery.initialize

require('jquery');
require('jquery.initialize/jquery.initialize.min.js');

$(document).ready(function () {
  // ========================================
  // comment editor.
  // ========================================
  $('.comment-editor textarea[name=content]').initialize(function () {
    $(this).froalaEditor({ 

so this froalaEditor call is not happening. any ideas?

also tried this;

  $.initialize('.comment-editor textarea[name=content]', function() {
    console.log('test');
  });

getting;

comment.js:13 Uncaught TypeError: $.initialize is not a function
    at HTMLDocument.<anonymous> (comment.js:13)
    at mightThrow (jquery.js:3583)
    at process (jquery.js:3651)

my webpack config;

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    frontend: './assets/js/frontend/frontend.js',
    backend: './assets/js/backend/backend.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './public/dist'),
    publicPath: '/dist/'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      //{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) },
      { test: /\.(jpe?g|gif|png|eot|svg|woff|woff2|ttf)$/, use: 'file-loader' }, // font & image loader
      { test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: '$' }] }, // globally expose $ for jQuery.
      //{ test: /\.js$/, exclude: [/node_modules/], use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }] }
    ],
  },
  resolve: {
    modules: [
      'node_modules',
      'assets/vendor/components'
    ],
    //alias: { jquery: 'jquery/src/jquery.js' }
  },
  plugins: [
    // new ExtractTextPlugin('[name].css'),
    new webpack.IgnorePlugin(/\.\/locale$/), // Fixes warning in moment-with-locales.min.js; Module not found: Error: Can't resolve './locale' in ...
    new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', jQuery: 'jquery' })
  ],
  devtool: 'source-map'
};

If content is loaded via ajax / xhr request and added to the page, should the content contain a script, the script is executed before initialize has a chance to watch the newly added elements.

This seems like intended behavior but I'm wondering if there is a recommended workaround to execute initialize before the script in this scenario?

Thanks!

I'm trying to migrate away from another jQuery plugin, which has several bugs, to this, which doesn't have either of those bugs. 👍

But, looking through the code, there appears to a fair bit of code devoted to parsing the selector, which seems fragile. More importantly, nodes are matched with Element.matches, which means that jQuery-specific features like :visible won't work, and jQuery extensions like :not only partially work.

Since it's a jQuery plugin, why not just use $(node).is(selector) instead of Element.matches + custom parsing?

$.find.tokenize('.test');
Uncaught TypeError: $.find.tokenize is not a function
    at <anonymous>:1:8

This function is used to introspect the selector when deciding which mutation events to ignore.

jquery/sizzle/issues/242

var observer = new MutationObserver(function (mutations) {

        // For each MutationSelectorObserver currently registered.
        for (var j = 0; j < msobservers.length; j++) {
            $(msobservers[j].selector).each(msobservers[j].callback);
        }
    });

If I read the code right, nowhere there the mutations variable is ever referenced. How does the script work then? Does it mean that for all mutations it subscribed to to all elements in the document, it will run callbacks? Huh? That explains the huge performance hit I witness ever since I added the script to my userscript.

Im Traying a write a bot for users download photos,when photos class was initialize the initialize event is work fine but i need sametimes deactive or remove initialize event ,
How can i do this ?

Forexample:

$(".ImgClass").initialize( function(){
//Codes etc...
});

I want This :
$(".ImgClass").initialize.delete();

Its Possible ?