javascript - 插入 DOM 的 jQuery 不跨浏览器兼容

Question

我有一个页面进行 ajax 调用并将返回的数据插入到 DOM 中。基本上，它是一个带有按钮的工具提示，可以将信息分享到社交媒体。问题是，在 Firefox 上，所有按钮都会触发事件，而在 Chrome 和 Safari 上，只有电子邮件共享有效。我做错了什么导致它不能在所有浏览器/平台上工作？

<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

首先，您以错误的方式选择了数据属性。 查看我的代码

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind() 方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素，因此这些元素必须在调用 .bind() 时存在。如需更灵活的事件绑定(bind)，请参阅 .on() 或 .delegate() 中对事件委托(delegate)的讨论。

所以如果你的jQuery版本低于1.7

您可以使用 .live() 或 .delegate() 代替 .bind()

但是 .live() 在 jQuery v 1.7 中被弃用并在 v 1.9 中被移除

.live() 现在和将来为所有匹配当前选择器的元素附加一个事件处理程序

.delegate() 根据一组特定的根元素，将处理程序附加到现在或将来与选择器匹配的所有元素的一个或多个事件。

$( 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+

所以最好的解决方案是使用.on()

要删除与 .on() 绑定(bind)的事件，请使用 .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);