[gelöst] Javascript/jQuery-Frage: .on bei Ajax-request?
Eingetragen von Ionit (1802)am 28.06.2015 - 17:14 Uhr in
Hallo Freunde,
ich nutze bei mir ein jQuery-Tooltip-Plugin (qtip)! Wenn man mit der Mouse über eine bestimmte CSS-Klasse fährt, wird ein weiteres DIV, welches sich darunter befindet, sichtbar gemacht und als Tooltip dargestellt.
<script type='text/javascript'>
jQuery(document).ready(function() {
// Grab all elements with the class "hasTooltip"
jQuery('.hasTooltip').each(function() { // Notice the .each() loop, discussed below
jQuery(this).qtip({
content: {
text: jQuery(this).next('div') // Use the "div" element next to this for the content
},
position: {
my: 'bottom left', // Position my top left...
at: 'top left',
adjust: {
y: -42
},
adjust: {
resize: true, // Can be ommited (e.g. default behaviour)
scroll: true // Can be ommited (e.g. default behaviour)
}
},
show: {
solo: true
},
style: {
classes: 'qtip-info'
}
});
});
});
</script>Das funktioniert auch soweit! Allerdings hab ich das Problem, wenn auf der selben Seite ein Ajax-Request abgesetzt wird, dass dann danach die Tooltips eben nicht mehr funktionieren. Ich las nun, dass man dazu die .on() method http://api.jquery.com/on/ verwenden soll denn damit funktionieren die Scripte auch nach einem Ajax-Request.
Allerdings weiß ich nicht wie ich diese .on() method nun in den obigen Code einfügen soll! Ich habe eine ganze Menge Beispiele gefunden aber dort wird immer der Click-Event verwendet und ein Click-Event verwende ich ja nicht.
Da ich kein Javascript/jQuery-Geek bin, komme ich hier nicht weiter und möchte daher mal fragen ob jemand von euch einen Tipp geben kann wie man das macht!
Danke schonmal und viele Grüße
Matthias
- Anmelden oder Registrieren um Kommentare zu schreiben
Ich habe das Problem nun
am 29.06.2015 - 17:20 Uhr
Ich habe das Problem nun selbst lösen können!
<script type='text/javascript'>
jQuery(document).ready(function() {
// Grab all elements with the class "hasTooltip"
jQuery(document).on('mouseover', '.hasTooltip', function(event) {
jQuery(this).qtip({
overwrite: false, // Make sure the tooltip won't be overridden once created
content: {
text: jQuery(this).next('div'), // Use the "div" element next to this for the content
},
position: {
my: 'bottom left', // Position my top left...
at: 'top left',
adjust: {
y: -42
},
adjust: {
resize: true, // Can be ommited (e.g. default behaviour)
scroll: true // Can be ommited (e.g. default behaviour)
}
},
show: {
event: event.type, // Use the same show event as triggered event handler
ready: true // Show the tooltip immediately upon creation
},
style: {
classes: 'qtip-info'
}
},event);
});
});
</script>
Drupal rockt!!!