插入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() 。 有关更灵活的事件绑定，请参阅.on()或.delegate()对事件委派的讨论。

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

你可以使用.bind() .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()绑定的事件，请使用.on() .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?
    }
});

Answer 3

您的代码可能在ajax调用之前运行。 尝试使用事件委派。 我为你创建了一个片段，似乎对我有用：

 $(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.com/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> 

Answer 4

这是您粘贴的确切代码吗？

在实际代码中，您是否在else子句中有电子邮件，例如

 if (p == 'facebook') {
    alert(p);
  } else if(p == 'twitter') {
    alert(p);
  } else {
    //email
  }

Answer 5

您需要使用事件委托将事件处理程序附加到将来的元素 - DOM ready事件中尚不存在的元素。 如果要将新内容添加到特定元素，例如#parentElement则必须使用：

$('#parentElement').on('click', '.row button.icon', handler);

否则你将不得不使用：

$(document).on('click', '.row button.icon', handler);

第一种更优选以获得更好的性能。

 $(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.com/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> 

Answer 6

$(document).on('click','element',func_Handler);

但你不能关闭这个点击处理程序，而是使用。

$('parentElement').on('click','element',func_Handler);