jQuery inserted into DOM not cross-browser compatible

Question

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>

Answer 1

First 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);

Answer 2

$('.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?
    }
});