Paste click priority function?

Question

I have a button that has:

• Inline onclick
• 3 attached click handlers:

Example

<input id='b1' type='button' value='go' onclick='alert("0")';'/>
$("#b1").on('click',function (){alert('1');});
$("#b1").on('click',function (){alert('2');});
$("#b1").on('click',function (){alert('3');});

It alerts 0,1,2,3.

But how can I insert a new one onclickinto the "custom index"?

For example, let's say that there is a function that I want to insert between warnings 1,2.

How can i do this?

ps:

Managing the built-in is onclicknot a problem, I just take it attrand run it later. The problem for me is registers .on. I was thinking about. $.data("events")But it is outdated and should only be used for debugging suggestions. (also - the syntax has changed).

Jsbin

Answer 1

jQuery, , .

?

on jQuery ( ), :

<script src="path/to/jQuery.js"></script>
<script src="path/to/jQuery-priorityze.js"></script>

<button id="go">Test 1</button>

<script>
  var $go = $("#go");
  $go.on('click', 5, function () { console.log('nice'); });
  $go.on('click', {priority: 4}, function () { console.log('a'); });
  $go.on('click', 6, function () { console.log('plugin?'); });
  $go.on('click', 1, function () { console.log('Is'); });
  $go.on('click', 3, function () { console.log('this'); });
  $go.on('click', 2, function () { console.log('not'); });
<script>

, 1 .

:

$("#b1").on('click', function (){alert('1');}); // 1
$("#b1").on('click', function (){alert('2');}); // 2
$("#b1").on('click', function (){alert('3');}); // 3

$("#b1").on('click', 1.5, function (){alert('4');}); // 1.5

// 0 -> 1 -> 4 -> 2 -> 3
// seems that onclick attribute is stronger that .on

function topPriority() {
  alert('top priority');
}

1.5 priority (1) (2). , onclick , on jQuery.

JSBIN

Github .

: https://github.com/IonicaBizau/jQuery-prioritize:-)

?

jQuery >= 1.8.x, $._data($el[0]).events, .

? ! :

• , .
• , ​​ , .
• .
• , .
• .

.

Answer 2

, , , :

:

• .
• $("#b1").on('click') , ,
• jQuery, onclick, .on('clic', , . -
• , : $("#b1").on('click',function (){alert('1');}); $("#b1").onclick(function (){alert('1');});//, $("#b1").onclick(function (){alert('1');}, INDEX);//, ( INDEX - )

:

$("#b1").on('click',function(){
 for (var i = 0; i < callbacks.length; i++) 

     callbacks[i]();
});
callbacks= new Array();
jQuery.fn.extend({
  onclick: function(callback, index) {

      if (index) {
        callbacks.splice(index, 0,callback);
      }
      else   callbacks.push(callback); 
  } 
});

, , , , , , :

$("#b1").onclick(function (){alert('1');}); 
$("#b1").onclick(function (){alert('2');}); 
$("#b1").onclick(function (){alert('3');}); 

$("#b1").onclick(function (){alert('new 2');},2); //index 2

jsfiddle

Answer 3

, JQuery ( vanilla js), JQuery. :

var callbacks = [
function (){alert('1');},
function (){alert('2');},
function (){alert('3');}
];

$("#b1").click(function() {
   for (var i = 0; i < callbacks.length; i++) callbacks[i]();
});

callbacks,

Answer 4

, . -, , , jQuery, , . , :

• ( ) :
  • onclick .
  • .
  • , , , , .
• . , , , , , - -. , . , , , . Chrome 31 onclick , , , .

, , , , - jQuery. script, : , , . onclick . onclick , . onclick stopPropagation() DOM, , . , .

jsfiddle: http://jsfiddle.net/mMG99/8/

, , :

<input id='b1' type='button' value='go' onclick='alert("0");'/>

<br>

<input id='index' type='number' min='0' />
<input id='b2' type='button' value='add listener at this index'/>

// Uses different ways to add the event handlers to test if this works with each
$("#b1").on('click',function (){alert('1');});
$("#b1").bind('click',function (){alert('2');});
$(document).on('click', '#b1', function (){alert('3');});

var selector = '#b1';
var insertedFunction = function(){alert('heyooo!');};    
var $target = $(selector);
var oldOnClickFunction = new Function($target.attr('onclick'));

var targetEvents = [oldOnClickFunction];
var boundEvents = $._data($target.get(0), "events");
boundEvents && boundEvents.click && $.each(boundEvents.click, function(i, val){
  targetEvents.push(val.handler);
});

var $targets = $(document).add($target.parents());   
$targets.each(function(){
  var eventObj = $._data(this, "events");
  eventObj && eventObj.click && $.each(eventObj.click, function(i, val){
    if($target.filter(val.selector).length) {
      targetEvents.push(val.handler);
    } 
  });
});

newOnClick = function(event){
  event.stopPropagation();
  $.each(targetEvents, function(i, handler){
    handler(event);
  });     
};

$("#b2").on('click', function(){
  $target.attr('onclick', 'newOnClick(event)');
  var removeAt = targetEvents.indexOf(insertedFunction);
  if (removeAt != -1) {
    targetEvents.splice(removeAt,1);  
  }
  targetEvents.splice(parseInt($('#index').val()), 0, insertedFunction);
  $target.off('click');
});

Answer 5

, , , , . , , , , :

<input id='b1' type='button' value='go' onclick='alert("0")';'/>

$("#b1").on('click',function (){
  alert('1');
  newFunctionCall();
  alert('2');
  alert('3');
});

Answer 6

, - , , .

- , unbind → , "".

( Chrome): http://jsbin.com/UsuRanAR/3/edit

function alert(a) {
  setTimeout(function(){
    console.log(a);
  },((a == 1 || a == 'top priority')?0:200));
}

, , .

Answer 7

:

html node, node, , "" , node:

var $clone = $('#b1').clone().attr('id', null).attr('onclick', null);
$clone.insertBefore('#b1');
$('#b1').hide();

$clone.on('click', function(e){
    alert('Kilroy was here');
    $('#b1').trigger('click');
    // do not duplicate the bubbling/default action
    return false;
});

- onclick ...