I have a page that makes an ajax call and inserts the returned data into the DOM. Basically, it's a tooltip with buttons inside that share info to social media. The problem is that while on Firefox, all the buttons trigger the event, on Chrome and Safari, only email sharing works. What am I doing wrong to cause it not to work across all browsers/platforms?
<div class="row">
<div class="large-12 columns">
<button id="facebook" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon facebook"></button>
<button id="twitter" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon twitter"></button>
<button id="googleplus" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon googleplus"></button>
<button id="tumblr" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon tumblr"></button>
<button id="email" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon email"></button>
</div>
</div>
<script>
var mode,
action,
gbutton = $('#googleplus');
// build and render the google+ button
...
// end
$('.row button.icon').bind('click', function(){
var p = $(this).attr('id'),
type = $(this).attr('data-type'),
shareType = $(this).attr('data-share-type'),
id = $(this).attr('data-id');
if(p == 'email'){
// works!
}
if(p == 'tumblr'){
// works!
}
if(p == 'facebook'){
// broken!
}
if(p == 'twitter'){
// broken!
}
});
</script>
I have a page that makes an ajax call and inserts the returned data into the DOM. Basically, it's a tooltip with buttons inside that share info to social media. The problem is that while on Firefox, all the buttons trigger the event, on Chrome and Safari, only email sharing works. What am I doing wrong to cause it not to work across all browsers/platforms?
<div class="row">
<div class="large-12 columns">
<button id="facebook" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon facebook"></button>
<button id="twitter" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon twitter"></button>
<button id="googleplus" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon googleplus"></button>
<button id="tumblr" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon tumblr"></button>
<button id="email" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon email"></button>
</div>
</div>
<script>
var mode,
action,
gbutton = $('#googleplus');
// build and render the google+ button
...
// end
$('.row button.icon').bind('click', function(){
var p = $(this).attr('id'),
type = $(this).attr('data-type'),
shareType = $(this).attr('data-share-type'),
id = $(this).attr('data-id');
if(p == 'email'){
// works!
}
if(p == 'tumblr'){
// works!
}
if(p == 'facebook'){
// broken!
}
if(p == 'twitter'){
// broken!
}
});
</script>
- 2 TLDR; could you really pair down the code to concentrate only on the issue with the clicks. So instead of lots of additional code doing stuff there's just a set of checks. Something like if(p == 'tumblr'){ console.log('tumblr'); } if(p == 'facebook') { console.log('facebook'); }. Showing all the code for what you then do once you're inside a condition just makes it harder for us to see what's happening :) – Code Uniquely Commented Nov 19, 2014 at 6:40
- Show final html code, with attributes' values, as there are no problems here - jsfiddle/ff4avcjg – Cheery Commented Nov 26, 2014 at 3:01
- Of the HTML you've provided, is all of it added via ajax or just part of it? – PeterKA Commented Dec 2, 2014 at 3:08
- 1>Check console for any error. 2>Also try to add associated script (i.e.facebook script,twitter) with the button html in DOM – Confused Commented Dec 2, 2014 at 11:09
- Why are you even using jQuery for this? – oxygen Commented Dec 3, 2014 at 2:22
6 Answers
Reset to default 4 +25First of all you are selecting data attributes in wrong way. see my code
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().
So if your jQuery version is lower than 1.7
You can use .live() or .delegate() insted of .bind()
But .live() is deprecated in jQuery v 1.7 And removed in v 1.9
.live() Attach an event handler for all elements which match the current selector, now and in the future
.delegate() Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+
So the best solution is using .on()
And to remove events bound with .on(), use .off().
;(function($){
$(document).ready(function(){
$('.row').on('click', 'button.icon', function() {
var self = $(this);
var p = self.attr('id'),
type = self.data('type'),
shareType = self.data('shareType'),
id = self.data('id');
if (p == 'email') {
console.log(p);
}
if (p == 'tumblr') {
console.log(p);
}
if (p == 'facebook') {
console.log(p);
}
if (p == 'googleplus') {
console.log(p);
}
if (p == 'twitter') {
console.log(p);
}
});
});
})(jQuery);
$('.row').on('click', 'button.icon', function( event ){
var $el = $( event.currentTarget ),
p = $el.attr('id'),
type = $el.data('type'),
shareType = $el.data('share-type'),
id = $el.data('id');
if(p === 'email'){
// works!
}
if(p === 'tumblr'){
// works!
}
if(p === 'facebook'){
// works?
}
if(p === 'twitter'){
// works?
}
});
Your code is probably running before the ajax calls. Try using event delegation. I created a snippet for you which seems to work for me:
$(document).on('click', '.row button.icon', function() {
var p = $(this).attr('id'),
type = $(this).attr('data-type'),
shareType = $(this).attr('data-share-type'),
id = $(this).attr('data-id');
if (p == 'email') {
alert(p);
}
if (p == 'tumblr') {
alert(p);
}
if (p == 'facebook') {
alert(p);
}
if (p == 'twitter') {
alert(p);
}
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 columns">
<button id="facebook" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon facebook"></button>
<button id="twitter" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon twitter"></button>
<button id="googleplus" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon googleplus"></button>
<button id="tumblr" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon tumblr"></button>
<button id="email" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon email"></button>
</div>
</div>Is this the exact code that you have pasted?
In actual code, do you have email in the else clause e.g.
if (p == 'facebook') {
alert(p);
} else if(p == 'twitter') {
alert(p);
} else {
//email
}
You would need to use event delegation to attach event handlers to future elements -- elements that do not yet exist at DOM ready event. If you are adding the new content to a particular element, say #parentElement then you would have to use:
$('#parentElement').on('click', '.row button.icon', handler);
Else you would have to use:
$(document).on('click', '.row button.icon', handler);
The first is more preferred for better performance.
$(function() {
$(document).on('click', '.row button.icon', function(){
var p = this.id,
type = $(this).data('type'),
shareType = $(this).data('share-type'),
id = $(this).data('id');
switch( p ) {
case 'email':
alert( p );
break;
case 'tumblr':
alert( p );
break;
case 'facebook':
alert( p );
break;
case 'twitter':
alert( p );
break;
case 'googleplus':
alert( p );
break;
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 columns">
<button id="facebook" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon facebook">Facebook</button>
<button id="twitter" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon twitter">Twitter</button>
<button id="googleplus" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon googleplus">Google+</button>
<button id="tumblr" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon tumblr">Tumblr</button>
<button id="email" data-id="{{id}}" data-type="{{type}}" data-share-type="{{share_type}}" class="zocial icon email">Email</button>
</div>
</div>$(document).on('click','element',func_Handler);
But you cannot off this click handler, instead use.
$('parentElement').on('click','element',func_Handler);