J'ai deux conteneurs, un qui n'est pas généré jusqu'à ce que la page a chargé. Celui généré en dernier (<div class=last></div>) devrait apparaître au-dessus du premier. Visuellement, il couvre le premier. Cependant, je ne peux pas obtenir le ". Last" pour répondre à un événement click live(). Il répondra à la première div, mais pas à la dernière div (encore une fois, la div qui apparaît visuellement au premier plan). Cela me rend fou, il n'y a pas d'autres événements de clic sur la page. Pour être clair voici ma page:Événement jQuery Bubbling, live(), événement de clic ne pas se propager
<body>
<div class="first">First div</div>
<script type="text/javascript">
// This works
$('body').append($('<div/>').addClass('last').text('last div'));
//This does not
$('.last').live('click', function(e) {
alert('hello');
});
</script>
</body>
Si je remplace « .last » avec « .first » ça marche, je n'ai pas d'autres événements de clic, donc je ne vois pas pourquoi la propagation devrait cesser. J'ai même assigné z-index: -1 pour durer. Cela doit être incroyablement simple, des idées?
CSS pour Last Div:
-moz-box-shadow:0 4px 10px 0 #8B8B8B;
background-color:white;
cursor:default;
margin:0 0 0 2px;
padding:4px 0;
position:absolute;
Première div, pas CSS. Editer: Mon DOM structuré est un peu plus complexe que l'exemple ci-dessus. Je suis certain que la div "last" est visible et en haut. Voici la structure DOM réelle du projet:
<div>
<button> (when button is pressed last is created)
<span>
<div>
<div class="last"></div>
</div>
</button>
</div>
<table>
<thead>
<tr>
<td><div class="first"></div></td>
</tr>
</thead>
</table>
Je crois que j'ai tout compris et ne savais pas jusqu'à ce que je posté mon arbre entier. Je me sens si stupide. Le div "button" arrêtait la propagation car il avait un événement jquery-ui attaché à celui-ci. Pour une raison quelconque sur Chrome et Firefox ne rend pas le changement d'état (c'est-à-dire, montrer le bouton comme étant enfoncé). C'est parce que le "dernier" div n'est pas sur le bouton et en dessous. Cependant, en ce qui concerne les événements, il s'est arrêté au bouton. IE8, étrangement, montrera le bouton poussé vers le bas (le déclenchement de l'événement), ce qui conduit à réaliser que c'était le bug. J'ai complètement oublié que jQuery-UI était accroché sur le bouton et que cela pouvait à la fois montrer le div et l'empêcher d'être montré. Déplacer la div à l'extérieur du bouton a résolu le problème.
Ce serait vraiment bien si jQuery avait une sorte de journal en direct où vous voyez toute la bulle d'événements vers le haut.
Pouvez-vous publier le CSS qui positionne les divs? – sje397
essayez de faire le div absolu 'left: 0',' top: 0', et un 'z-index' plus élevé, puis' position: relative' sur le parent de ce div absolu .. – Reigel