Que signifie role = button?

Il indique à l'accessibilité (et à d'autres) logiciels Quel est le but du div. Plus ici dans le projet de role spécification d'attribut.

Oui, c'est juste sémantique. L'envoi d'un événement click au bouton devrait fonctionner.

Une version antérieure de cette réponse (en 2011) disait:

...mais la fonction click de jQuery ne le fait pas; elle ne déclenche que les gestionnaires d'événements qui ont été connectés à l'élément avec jQuery , Pas les gestionnaires accrochés d'autres façons.

...et fourni l'exemple de code et de sortie ci-dessous.

Je ne peux pas reproduire la sortie maintenant (deux ans plus tard). Même si je reviens aux versions antérieures de jQuery, ils déclenchent tous les gestionnaires jQuery, les gestionnaires DOM0 et les gestionnaires DOM2. L'ordre n'est pas nécessairement le même entre un clic réel et la fonction click de jQuery. J'ai essayé les versions jQuery 1.4, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5, 1.5.1, 1.5.2, 1.6, et des versions plus récentes telles que 1.7.1, 1.8.3, 1.9.1 et 1.11.3 (le courant 1.X version à partir de cette écriture). Je ne peux que conclure que c'était une chose browser , et je ne sais pas quel navigateur j'utilisais. (En ce moment, J'utilise Chrome 26 et Firefox 20 pour tester.)

Voici un test qui montre qu'en effet, les gestionnaires jQuery, les gestionnaires DOM0 et les gestionnaires DOM2 sont tous(à ce jour!) déclenchée par click de jQuery:

jQuery(function($) {
  var div;

  $("<p>").text("jQuery v" + $.fn.jquery).appendTo(document.body);

  // Hook up a handler *not* using jQuery, in both the DOM0 and DOM2 ways
  div = document.getElementById("theDiv");
  div.onclick = dom0Handler;
  if (div.addEventListener) {
    div.addEventListener('click', dom2Handler, false);
  } else if (div.attachEvent) {
    div.attachEvent('onclick', dom2Handler);
  }

  // Hook up a handler using jQuery
  $("#theDiv").click(jqueryHandler);

  // Trigger the click when our button is clicked
  $("#theButton").click(function() {
    display("Triggering <code>click</code>:");
    $("#theDiv").click();
  });

  function dom0Handler() {
    display("DOM0 handler triggered");
  }

  function dom2Handler() {
    display("DOM2 handler triggered");
  }

  function jqueryHandler() {
    display("jQuery handler triggered");
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="theDiv">Try clicking this div directly, and using the button to send a click via jQuery's <code>click</code> function.</div>
<input type='button' id='theButton' value='Click Me'>